css - 垂直对齐不起作用？

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>

score 3 · Accepted Answer

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

score 0 · Accepted Answer

0

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

于 2013-07-30T06:55:37.417 回答

score 0 · Accepted Answer

0

将此添加到您的CSS

 display:table-cell

于 2013-07-30T06:56:09.843 回答

score 0 · Accepted Answer

0

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

于 2013-07-30T06:56:13.107 回答

score 0 · Accepted Answer

使用这个 CSS

tou 应该使用display:table;and 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;
}

score 0 · Accepted Answer

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

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

css - 垂直对齐不起作用？

6 回答 6

Related

Reference