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

时间:2017-05-04 07:51:00

标签: javascript html css css3

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

enter image description here

我的div结构如下。

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

2 个答案:

答案 0 :(得分:4)

是的,使用行高和高度也很简单:

.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一个最小高度,但我不愿意,因为移动响应越来越难以定义高度。

答案 1 :(得分:0)

使用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>