基础 - 垂直居中对齐

Question

我正在使用 foundation v6.2.1，我试图将 h3 元素垂直对齐到中间，但我没有成功。我该怎么做？

<div class='large-12 columns most-read'>
  <div class='large-1 columns align-self-middle'>
    <h3> {{ orderNumber }}</h3>
  </div>
  <div class='large-10 columns'>
    <p>{{ Article title }}</p>
    <br>
    <p>{{ Article summary }}</p>
  </div>
  <div class='large-1 columns text-center align-self-middle'>
    <h3>{{ numberOfViews }}</h3>
  </div>
</div>

Answer 1

您可以使用 line-height 选项在中间垂直对齐文本元素。

将 div 设置为某个高度并将 h3 元素的 line-height 设置为相同的单位。

.align-self-middle
{
 height:100px;
}

.align-self-middle h3
{
  line-height:100px;
}

您现在可以看到您的文本在中间垂直对齐。

Answer 2

.align-self-middle class包含在foundation-flex版本中，其他版本没有。您的代码看起来不错，应该可以工作。

查看工作示例。 http://codepen.io/shoaibik/pen/xOKorV

基础 - 垂直居中对齐

Foundation - vertically align middle

html

css

zurb-foundation