垂直对齐不工作？

问题描述：

我想将文本居中在我创建的“人造”表的单元格中间。（人工，因为它使用的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>

您可以将它发布到小提琴（jsfiddle.net）...这种方式会更容易帮助:-) – mooonli

垂直对齐[适用于内嵌级和表格元素]（https：//开发人员.mozilla.org/en-US/docs/Web/CSS/vertical-align） – godfrzero

答

vertical-align不会对块元素（div的）工作，你的情况，你可以使用line-height: 40px;来代替。给人一种文本元素的行高度等于父的高度将围绕它verically

谢谢，编辑清除了我的问题。当定时器到期时，我会将其标记为答案 – Bloodcount

答

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

答

添加到您的CSS

答

添加物业display:table-cell;为它工作

答

使用这个CSS

土特产品应使用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; 
}

答

您已设置的高度像素为.cell类，所以你可以做到以下几点：

添加line-height: 40px;在你的CSS的.cell选择。

垂直对齐不工作？

相关推荐