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

我在布局中有一个令人困惑的情况。正如我在下面附上的那样，设计显示了双排和单排的文字。我为单行文本设置了一个边距，以便对齐。如果有双线文本，我必须手动设置边距。有没有可能设置此JavaScript函数？是否可以使用纯CSS进行锥化，而不必为每种文本类型设置特定的边距。动态设置页边距以垂直居中的内容

我的DIV结构如下。

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

来源

2017-05-04 Imesh Chandrasiri

这可以帮助 - http://stackoverflow.com/questions/8865458/how-to-vertically-center-text-with-css – Ninjaneer

@Mendax：即对齐1线的文本在中心，TS询问如何处理单线和双线混合情况 – Martijn

PS：该笔刷不是'清除密码'的好选择 – Martijn

是，利用太行高和高度相当简单：

.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分钟高度，但我不喜欢，因为移动响应越棘手越多，您定义的高度越多。

来源

2017-05-04 07:54:11 Martijn

这是一种魅力！ :) –

如果有3行？这会工作吗？ – Ninjaneer

如果您将高度设置为线高的3倍，那么确实如此。 – Martijn

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

来源

2017-05-04 08:22:11 LGSon

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

回答

相关问题