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将容器视为表格单元格,该表格单元格允许指定垂直对齐.