动态地将边距设置为垂直中心内容

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，您不需要任何特定的高度，无论如何，它都会使用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>

​