动态设置边距为垂直居中的内容

Question

我的布局中有一个令人困惑的情况。正如我在下面附上的那样，该设计显示了双线和单线的文字。我为单行文本设置了一个边距，以便它对齐。当有双列文本时，我必须手动设置边距。是否可以在不使用javascript函数的情况下设置它？可能是使用纯CSS的锥形而没有每种文本类型的特定边距。

我的div结构如下。

<div class="operation text-center">
    <i class="icon fw fw-ringing fw-3x"></i>
    <span>Ring</span>
</div>

Answer 1

是的，使用行高和高度也很简单：

.operation .itemText{
    line-height: 15px;
    height: 30px; /* at least twice the line-height */
}

<div class="operation text-center">
    <i class="icon fw fw-ringing fw-3x"></i>
    <span class="itemText">Ring</span>
</div>

技巧是将文本空间定义为两行的高度。小措辞项仍然占用两行，但只填写一行文字。

或者，您可以给整个.operation一个最小高度，但我不愿意，因为移动响应越来越难以定义高度。

Answer 2

使用CSS Flexbox，您不需要任何特定的高度，无论如何都会使用margin: auto 0对齐，并且您拥有多少行并不重要。

.wrapper {
  display: flex;
}
.operation {
  display: flex;
  flex-direction: column;
}
.operation .itemText {
  margin: auto 0;
}


/* styles added for this demo */
.wrapper { margin-bottom: 20px; }
.operation { padding: 10px; }

<div class="wrapper">
  <div class="operation text-center">
    <i class="icon fw fw-ringing fw-3x">icon</i>
    <span class="itemText">Ring</span>
  </div>
  <div class="operation text-center">
    <i class="icon fw fw-ringing fw-3x">icon</i>
    <span class="itemText">Ring<br>2 lines</span>
  </div>
</div>

<div class="wrapper">
  <div class="operation text-center">
    <i class="icon fw fw-ringing fw-3x">icon</i>
    <span class="itemText">Ring<br>3<br>lines</span>
  </div>
  <div class="operation text-center">
    <i class="icon fw fw-ringing fw-3x">icon</i>
    <span class="itemText">Ring</span>
  </div>
</div>