Question

我希望将文本置于我创建的“人工”表格的单元格中间。（人为因为它使用div）

在css样式中我添加了这些行：

text-align:center;
vertical-align:middle;

这通常可以解决问题。在这种情况下，他们没有。以下是完整的源代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>

    <title>asd</title>
    <style>
        body {
            padding:0;
            margin:0;
        }  
     .Table {
       position:absolute;
       left:25px;
       top:275px;
       border:none;
       width:650px;
       height:40.99999px;
       border-top:1px solid black;
       border-left:1px solid black;
}
.Cell {
    float:left;
    width:107.3333px;
    height:40px;
    border-right:1px solid black;
    border-bottom:1px solid black;

    font-weight:bold;
    text-align:center;
    vertical-align:middle;
}       
    </style>
</head>

<body>  
      <div class="Table">
         <div class="Cell ">Hello</div>
         <div class="Cell ">Hello</div>
         <div class="Cell ">hihi</div>         
          <div class="clear"></div>
         <div class="Cell "></div>
         <div class="Cell "></div>
         <div class="Cell "></div>
      </div>   
</body>
</html>

Answer 1

vertical-align不适用于块元素（div），在您的情况下，您可以使用line-height: 40px;。给文本元素一个等于父高度的行高将使它真正居中

Answer 2

vertical-align不适用于div，适用于表格单元格

Answer 3

将此添加到您的css

 display:table-cell

Answer 4

添加属性display:table-cell;以使其正常工作

Answer 5

使用此css

tou应使用display:table;和display:table-cell;属性

http://jsfiddle.net/MepnV/

 body {
            padding:0;
            margin:0;
        }  
     .Table {
       position:absolute;
       left:25px;
       top:275px;
       border:none;
       width:650px;
    display:table;
       height:40.99999px;
       border-top:1px solid black;
       border-left:1px solid black;
}
.Cell {

    width:107.3333px;
    height:40px;
    border-right:1px solid black;
    border-bottom:1px solid black;
    display:table-cell;
    font-weight:bold;
    text-align:center;
    vertical-align:middle;
}

Answer 6

您已为.cell课程设置了高度（以像素为单位），因此您可以执行以下操作：

将line-height: 40px;添加到CSS中的.cell选择器。

垂直对齐不起作用？

6 个答案: