vertical-align：中间不工作

Question

我有一个标题，左右两边都有边框。理想情况下，我希望这些是垂直对齐的。但是，vertical-align: middle;无效，我不太清楚为什么。想法？

CSS

#save-the-date {
    margin: 0 auto;
    width: 960px;
}

#save-the-date #title {
    vertical-align: middle;
}

#save-the-date #title h2 {
    font-size: 165%;
    margin: 0 auto;
    width: 150px;
}

#save-the-date #title .left-border {
    float: left;
    background:url('img/border.png') repeat-x -10px 0;
    width:340px;
    height:3px;
}

#save-the-date #title .right-border {
    float: right;
    background:url('img/border.png') repeat-x -10px 0;
    width:340px;
    height:3px;
}

HTML

<div id="save-the-date">
    <div id="title">
        <div class="left-border"></div><!-- end border -->
        <h2>Save The Date</h2>
        <div class="right-border"></div><!-- end border -->
    </div><!-- end title -->
</div><!-- end save-the-date -->

Answer 1

在容器上设置display: table-cell以及vertical-align: middle。这将导致CSS将容器视为表格单元格，允许指定垂直对齐。

Answer 2

由于这只是一行，您只需将行高设置为元素的高度即可。 View it on JSFiddle

HTML

​<p>hello</p>​

CSS

p {
  line-height: 50px;
  height: 50px;
  background-color: #eee;
}​

Answer 3

因为您使用div div的显示是块，您可以将其更改为<span>或chanage显示，例如：

div
{display: inline-block}

或

  

div {display：table-cell;}

Answer 4

我不知道为什么它在我的情况下有效...但我可以通过以下方式看到它起作用：

div {padding-top: 0%;}