Question

我正在使用基础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类包含在foundation-flex版本中，并且在其他版本中不可用。你的代码看起来还可以，它应该可以工作。

参见工作示例。 http://codepen.io/shoaibik/pen/xOKorV

基础 - 垂直对齐中间

2 个答案: