如何垂直排列文本？

Question

什麼是最簡單的方式垂直文本與文本垂直here？

<ul> 
    <li>Hello</li> 
    <li>Bye Bye</li> 
    <li>Ciao</li> 
</ul> 

li { 
    border: 1px solid black; 
    width: 100px; 
    height: 50px; 
    margin-bottom: 20px; 
    text-align: center; 
} 

Answer 1

如果您只有一行文字，則可以將line-height設置爲與height相同的值。這適用於任何元素。

Answer 2

哈克，但可能是最簡單的方法：

li { 
    display: table-cell; 
    vertical-align: center; 
} 

您需要到位的列表項子彈添加背景圖片。

Answer 3

如果你知道你總是要居中一行你可以匹配height和line-height

li { 
    ... 
    height: 50px; 
    line-height: 50px; 
    ... 
} 

Answer 4

嘗試vertical-align屬性：

http://www.w3schools.com/css/pr_pos_vertical-align.asp

Answer 5

把一個線條高度和文字和邊框之間的差距是很好的。但這不是最佳做法。因爲線條高度不是用於創建邊距或填充。這是爲了在兩個文本行之間創建差距（段落的兩行之間的差距）。

因此，讓你的任務完成後，你必須放一個邊距或填充。更好的選擇是放入一個保證金（但這不是一個對齊方式，只需將餘量放在頂部）。而且，把你的文本放入一個「p」標籤或「span」標籤（無論標籤是什麼，它可以用於包裝文本）。

HTML代碼，

<ul> 
    <li><span>Hello</span></li> 
    <li><span>Bye Bye</span></li> 
    <li><span>Ciao</span></li> 
</ul> 

CSS代碼，

ul li span { 
    margin-top: 5px; 
} 

如果使verticaly對齊是必須的，下面是代碼。

ul li { 
    position: relative; 
    } 

    ul li span { 
     position: absolute; 
     top: 50%; 
     font-size: 12px; /* change this as your need. */ 
     line-height: 12px; /* keep this value same as font-size. */ 
     margin-top: -6px; /* half value from the font-size. */ 

}