Question

另外，我想将div中的verticaly和水平内容居中。我试过了，但没有什么对我有用。我尝试了，增加绝对位置。然后我可以正常设置宽度和高度，但后来我在div中的宽度文本有问题：我不能垂直居中

这是一个简单的代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>

.Table{
background-color:red;
display:table;
height:400px;
width:300px;
}

.Row1{
background-color:blue;
display:table-row;
text-align:center;
vertical-align:middle;
width:20px; 
height:100px;
position:relative;
}

</style>    

<div class="Table">

<div class="Row1">
<p>Row1</p>
<!--<div class="Cell1"></div>
<div class="Cell2"></div>
<div class="Cell3"></div>-->
</div>

<div class="Row2">
<p>Test</p>
</div>
</div>
</body>
</html>

我认为一个解决方案是：再次将内部div显示为表格，然后将段落设置为表格单元格。在那之后，我可以使用align-text或vertical-align轻松地居中。此外，我可以轻松设置此div的宽度和高度。

Answer 1

你的问题真的不是很清楚。您不能设置表格行的宽度（它跨越表格的整个宽度），但您可以设置单元格的宽度。

Here's an example CSS table with content centred in each cell.

HTML：

<div class="table">
    <div>
        <div class="cell1">Cell1</div>
        <div>Cell2</div>
        <div>Cell3</div>
    </div>
    <div>
        <div>Cell4</div>
        <div>Cell5</div>
        <div>Cell6</div>
    </div>
</div>

CSS：

.table {
    /* a table */
    display:table;
    height:400px;
    width:300px;
    border-collapse:collapse;
}
.table > div {
    /* rows */
    background-color:blue;
    display:table-row;
}
.table > div > div {
    /* cells */
    background-color:pink;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    border:1px solid red;
}
.table .cell1 {
    /* a specific cell */
    width:20px;
    background-color:lime;
}

http://jsfiddle.net/TU9rj/

如何设置显示为表格单元格的div的自定义宽度

1 个答案: