垂直对齐：中间不工作答案

【问题标题】：vertical-align: middle not working垂直对齐：中间不工作
【发布时间】：2013-07-10 17:57:15
【问题描述】：

我有一个节标题，它的左右两边都有边框。理想情况下，我希望这些垂直对齐。但是，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 -->

【问题讨论】：

浮动是您的问题，顺便说一下，您还需要为垂直对齐设置正确的高度。

标签： html css vertical-alignment

【解决方案1】：

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

【讨论】：

设置display: table-cell 导致每个元素相互堆叠。任何想法为什么会发生/如何纠正？
table-cell 将默认堆叠。您需要创建一个中心框并将样式仅应用于该框。其他两个div 元素不需要应用表格单元格，所以这不会造成任何问题。
我不知道我是否理解正确，但是..我已经把我想放在中心的h2放在它自己的div中，但仍然没有看到变化。 jsfiddle.net/c484z
给你jsfiddle.net/rtaaP/2。我进一步简化了这一点......我所做的是将所有内容都设为跨度，然后浮动左右边框框。因为 span 是内联元素，所以它们在显示属性时不会像 div 那样做出反应。 h2 也是内联的，以使其对垂直居中做出正确反应。 CSS 已更改以更好地向您展示到底发生了什么，但您应该能够相当轻松地适应您想要完成的任务。
我非常感谢您的周到回答。我已将您在 jsfiddle 中给我的指示应用到我的网站，但事情仍然看起来不太正确。 jsfiddle.net/Fkp6W

【解决方案2】：

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

HTML

<p>hello</p>

CSS

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

【讨论】：

【解决方案3】：

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

div
{display: inline-block}

或

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

【讨论】：

【解决方案4】：

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

div {padding-top: 0%;}

【讨论】：