動態設置頁邊距以垂直居中的內容

我在佈局中有一個令人困惑的情況。正如我在下面附上的那樣，設計顯示了雙排和單排的文字。我爲單行文本設置了一個邊距，以便對齊。如果有雙線文本，我必須手動設置邊距。有沒有可能設置此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

動態設置頁邊距以垂直居中的內容

回答

相關問題