内联块 div 内的垂直对齐跨度文本答案

【问题标题】：Vertical align span text inside inline-block div内联块 div 内的垂直对齐跨度文本
【发布时间】：2014-10-16 22:52:53
【问题描述】：

我正在建立一个平面设计的网站。我有一个标题，在它下面有两个相邻的不同颜色的块。我试过左右浮动，但建议使用 display: inline-block 代替。

不过，我遇到了一个问题。我想在左右块的中间放置一些文本并尝试使用 align-items: center，但发现只有当 div 设置为 flex 时才有效。

所以我的问题是，我能否以某种方式保留我的内联块并使我的文本居中在我的块中间（水平和垂直）？

    body {
      margin: 80px 0 0;
    }
    #pagewrapper {
      width: 100%;
    }
    #header {
      width: 100%;
      height: 80px;
      background-color: #008B8B;
      position: fixed;
      top: 0;
    }
    .content-left,
    .content-right {
      width: 50%;
      height: 500px;
      color: #FFFFFF;
      display: -moz-inline-stack;
      display: inline-block;
      zoom: 1;
      *display: inline;
    }
    .content-left {
      background-color: #66CC99;
    }
    .content-right {
      background-color: #20B2AA;
    }
    #header-bot {
      height: 800px;
      background-color: #F8F8FF;
    }
    #footer {
      height: 50px;
      background-color: #AFEEEE;
    }
    .title {
      font-size: 18px;
    }

<body>
  <div id="pagewrapper">
    <div id="header">
    </div>
    <!-- End of Header -->
    <div class="content-left">
      <span class="title">This is left Content</span>
    </div>
    <!-- End of Content Left -->
    <div class="content-right">
      <span class="title">This is Right Content</span>
    </div>
    <!-- End of Content Right -->
    <div id="header-bot">
    </div>
    <!-- End of Header-Bot -->
    <div id="footer">
    </div>
    <!-- End of Footer -->
  </div>
  <!-- End of PageWrapper -->

</body>

【问题讨论】：

标签： html alignment vertical-alignment css

【解决方案1】：

虽然将列的显示类型更改为table-cell 可能会导致问题（例如，relative 定位的效果对于表格单元格元素未定义）另一种选择是在列中添加全高（伪）元素并通过vertical-align: middle; 声明将其与<span> 元素垂直对齐：

EXAMPLE HERE

.content-left,
.content-right { text-align: center; } /* Align inline children horizontally */

.content-left:after, .content-right:after {
    content: "";
    display: inline-block;
    vertical-align: middle;  /* Align inline level elements vertically */
    height: 100%;
} 

.title {
    vertical-align: middle;  /* Align inline level elements vertically */
}

更多详情，您可以在此处参考my answer。

【讨论】：

这很完美！谢谢！您说表格有缺点，可能会导致问题。这种方法有没有这样的缺点？
@JesperAndersen 只是为了让它在 IE6/7 中工作，使用虚拟 HTML 元素而不是 :after 伪元素。这并不重要，因为 IE6/7 也不支持 table-cells。

【解决方案2】：

在您的 .content-left 和 .content-right div 上，将显示更改为表格并添加居中对齐的文本。对于 .title 跨度，将显示更改为 table-cell 并添加中间的垂直对齐；

.content-left, .content-right {
    display: table;
    text-align: center;
}
.title {
    display: table-cell;
    vertical-align: middle;
}

这里有一个jsfiddle 来演示（我将 div 的高度更改为 200px，以便在较小的 jsfiddle 窗口中更容易看到居中效果）

【讨论】：