Question

我需要两列：

左侧的按钮
右侧列表

它们都需要在包装div的中间垂直居中。到目前为止我得到了这个： https://jsfiddle.net/s1ky1hqr/1/

我使用此代码将包装内的内联块垂直居中：

.wrapper {
  /* let it fill the whole container */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  right: 5px;
}
.wrapper:before {

  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;

}

.column {

  display: inline-block;
  width: 48%;

}

<footer>
  <div class="wrapper">
    <div class="column">

      <a class="cta" href="#">
        <span class="text">
          Button
        </span>
        <span class="arrow">
          >
        </span>
      </a>
    </div>
    <div class="column">
      <ul>
        <li><a href="#">Link 1</a></li><li>
        <a href="#">Link 2</a></li><li>
        <a href="#">Link 3</a></li>
      </ul>
    </div>

  </div>
</footer>

唯一的问题是ul列表不是绝对的，因为列div不是50％宽。如果我给两个列div的宽度为50％，则两个div不会彼此相邻。而且我不能“浮动”列div，因为在这种情况下文本不再垂直居中。

任何人都可以帮助我吗？

Answer 1

如果在包装器中将font-size设置为0并将其重置为列，则实际上可以使用50%宽度的列，如下所示：

html { font-size: 12px; }
.wrapper {
  /* let it fill the whole container */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  right: 5px;
  font-size: 0;
}
.wrapper:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.column {
  display: inline-block;
  width: 50%;
  font-size: 1rem;
}

<footer>
  <div class="wrapper">
    <div class="column">
      <a class="cta" href="#">
        <span class="text">
          Button
        </span>
        <span class="arrow">
          >
        </span>
      </a>
    </div>
    <div class="column">
      <ul>
        <li><a href="#">Link 1</a></li><li>
        <a href="#">Link 2</a></li><li>
        <a href="#">Link 3</a></li>
      </ul>
    </div>

  </div>
</footer>

Answer 2

你应该将vertical-align：middle添加到.column而不是.wrapper：在

之前

Answer 3

您可以通过将li样式更改为display: block;而不是display: inline-block，并在float: right;元素上删除ul来实现此目的。

Here's your example, updated.

两列文本垂直居中

3 个答案: