空間線垂直

Question

我有三行文字我想空間均勻附近的height=100px;一箱（實際上是圖像）

有什麼我能做的，將做到這自動的？還是我來計算行高度和改變padding小號margin小號line height S和font sizes？

Answer 1

我的解決方案包括含文字的線條元素的高度。由於您的塊爲100px，因此您希望包含文本的塊也爲100px。它也可以是三個獨立的塊，加起來可達100px。

這裏有兩個獨立的解決方案，無論工作。

HTML：

<div class="box1">box1</div> 
<p class="p1">This is line 1.<br> 
This is line 2.<br> 
This is line 3.</p> 

CSS：

.p1 { 
    margin: 0; 
    padding: 0; 
    height: 100px; 
    line-height: 33px; 
    background-color: silver; 
} 
.box1 { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    float: left; 
} 

HTML：

<div class="box2">box2</div> 
<p class="p2">This is line 1.</p> 
<p class="p3">This is line 2.</p> 
<p class="p4">This is line 3.</p> 

CSS：

.p2, .p3, .p4 { 
    margin: 0; 
    padding: 0; 
    height: 33.3px; 
    line-height: 33.3px; 
    background-color: silver; 
} 

.box2 { 
    background-color: green; 
    width: 100px; 
    height: 100px; 
    float: left; 
} 

Demo at CodePen

在第二種解決方案（單獨的塊）中，可以省略行高，文本的第一行將與框的頂部對齊，其他行均勻地位於其下方。

Answer 2

你可以申請一個line-height即三分之一的圖像height。

img { 
    height: 100px; 
    vertical-align: middle; 
} 
.text { 
    vertical-align: middle; 
    display: inline-block; 
    max-width: 300px; 
    line-height: 33.33px; 
} 

http://jsfiddle.net/myajouri/Nk5Hj/