如何在不使用顯示的情況下垂直居中文本：table-cell？

我試圖讓菜單出現在30px行的中間，但問題是除非使用display：table-cell，否則我無法從頂部移動它。如何在不使用顯示的情況下垂直居中文本：table-cell？

這裏有什麼問題？

樣式表文件：

div.menu 
{ 
    width: 600; 
    height: 30px; 
    border: 1px solid black; 
    margin: 0px auto; 
    text-align: center; 
    vertical-align: bottom 
}

菜單代碼在我的HTML文件：

<div class="space"></div> 
<div class="menu"> 
    <a href="index.html">Home</a> 
    <a href="index.html">Home</a> 
    <a href="index.html">Home</a> 
    <a href="index.html">Home</a> 
    <a href="index.html">Home</a> 
</div> 
<div class="space"></div>

來源

2012-02-04 HelpNeeder

line-height: 100px;設置菜單行的高度。但保持足夠的空間橫向維度，否則你會發瘋看法。期待min-width,width或overflow-x規則。

div.menu 
{ 
    width: 600px; 
    /* Use line-height instead of height */ 
    line-height: 30px; 
    border: 1px solid black; 
    margin: 0px auto; 
    text-align: center; 
} 

div.menu a { 
    vertical-align: middle; 
}

來源

2012-02-04 12:45:36

行高解決了我的問題。謝了哥們！ – HelpNeeder 2012-02-04 12:46:58

這解決了問題，但不是正確的方法。您需要在'menu'分區中使用'vertical-align'屬性作爲錨點。 – apnerve 2012-02-04 13:25:13

感謝您的評論。固定 – 2012-02-04 14:56:29

檢查這個小提琴。 http://jsfiddle.net/sfz7d/

告訴我，如果它適合你。

來源

2012-02-04 12:38:40 Vikas

對不起，我不知道怎麼用這個。我在HTML/CSS中有點生疏，2年沒有這樣做過。 – HelpNeeder 2012-02-04 12:44:13

將line-height設置爲期望的值可以解決問題，但它不是一個正確的方法。這只是一個黑客。正確的方法是使用vertical-align財產（爲menu格內的所有錨）

.menu a { 
    vertical-align: middle; 
}

來源

2012-02-04 13:23:57 apnerve

正如你所看到的，我已經在我的css代碼中使用了v-lign。 – HelpNeeder 2012-02-06 20:52:12

是的，但對於錯誤的元素。 'vertical-align'用於'inline'元素。但是你已經將它用於'div'，它是一個'block-level'元素。 – apnerve 2012-02-07 17:58:04

如何在不使用顯示的情況下垂直居中文本：table-cell？

回答

相關問題