Question

我正在建立一个平面设计的网站。我有一个标题，在它下面有两个不同颜色的块彼此相邻。我尝试左右浮动，但建议使用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>

Answer 1

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

<强> 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 。

Answer 2

在你的.content-left和.content-right divs上将显示更改为table并添加text-align of center。对于.title spans，将显示更改为table-cell并添加vertical-align of middle;

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

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

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

2 个答案: