html - 垂直对齐：中间不工作

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

由于这只是一行，您可以简单地将 line-height 设置为元素的高度。在 JSFiddle 上查看

HTML

​&lt;p>hello</p>​

CSS

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

Answer 3

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

div
{display: inline-block}

或者

div {显示：表格单元格；}

Answer 4

我不知道为什么它在我的情况下工作......但我可以通过执行以下操作看到它工作：

div {padding-top: 0%;}