Question

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

我读到行高应与div的高度相同，为vertical-align：middle; 这个div的高度为35px，但是行高为16px。有没有办法中间对齐这个div？

Answer 1

您可以从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管理文本的位置，以及边距（例如，如果您使用了<p>申请margin-bottom的人。）

Answer 2

使用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

css vertical-align：middle，line-height不同于height

2 个答案: