css 垂直对齐：中间，行高与高度不同答案

【问题标题】：css vertical-align:middle, line-height different than heightcss 垂直对齐：中间，行高与高度不同
【发布时间】：2014-03-30 23:59:54
【问题描述】：

`.history-bar{
padding-left:10px;
margin-top:5px;
margin-bottom:5px;
height:35px;
line-height:16px;
width:472px;
vertical-align:middle;
color:black; 
}`

我读到 line-height 应该与 div 的高度相同，垂直对齐：中间；这个 div 的高度为 35 像素，但行高为 16 像素。有什么办法可以让这个 div 居中对齐吗？

【问题讨论】：

标签： css

【解决方案1】：

使用display: table-cell; 和vertical-align: middle; 来垂直对齐文本。

.history-bar {
    padding-left:10px;
    margin-top:5px;
    margin-bottom:5px;
    height:35px;
    line-height:16px;
    width:472px;
    color:black; 
    background: #eee;
    display: table-cell;
    vertical-align: middle;
}

JSFiddle demo

【讨论】：

【解决方案2】：

您可以从 CSS 中删除 vertical-align 属性，是的，您可以将 line-height 更改为与 height 相同，如下所示：

.history-bar {
  padding-left:10px;
  margin-top:5px;
  margin-bottom:5px;
  height:35px;
  line-height:35px;
  width:472px;
  color:black; 
  border: 1px solid; /* added so you can see it's position */
}

Here's a JSfiddle of the code above.

如果您没有设置明确的height，那么您可以通过父容器中的padding 管理文本的位置以及边距（例如，如果您使用应用了margin-bottom 的<p> )。

【讨论】：

我只想垂直对齐：中间并有高度：35px；但 line-height:16px;