html - 文本垂直居中的两列

Question

我需要两列:

• 左边一个按钮
• 右边的列表

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

我使用这段代码使内联 block 在包装器内垂直居中:

.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 将无法并排放置。而且我不能“ float ”列 div，因为在这种情况下，文本不再垂直居中。

谁能帮帮我？

Answer 1

如果您在包装器中将字体大小设置为 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>