Question

遇到问题：

<div class="outer">
    <h4>My Guide</h4>

  <div class="inner four-columns">
        <img src="{{ 'guide3.jpg' | asset_url }}" class="img-responsive" />
  </div>

    <div class=" inner four columns">
        <p>Content.</p>
    </div>

 </div>

是否有一种简单的方法可以在不使用表的情况下垂直对齐Text内容？

Answer 1

它不一定是表格，但类似的东西更灵活，特别是如果你还想让它在以后负责：

由容器包装的HTML：

<div class="container">
  <div class="inner">
        <img src="{{ 'guide3.jpg' | asset_url }}" class="img-responsive" />
  </div>
  <div class=" inner">
      <p>Content.</p>
  </div>
</div>

并且这个CSS适用于它：

.container {
  display: table;
}
.inner {
  display: table-cell;
  vertival-align: middle;
}

对于较小的屏幕，您可以在媒体查询中将所有这些设置为display: block;（如果您想要）。

Answer 2

将.container内所有子div的显示设置为阻止，如下所示：

.outer > .inner { display: block; }

并排图像＆amp;文字：如何垂直居中文字

2 个答案: