居中嵌套塊的文本

我需要將文本置於我的一個內嵌塊按鈕中。我該如何去完成這件事？任何幫助將不勝感激。居中嵌套塊的文本

源代碼：

CSS：

.dropMenu 
{ 
    color: #FFFFF0; 
    text-decoration: none; 
    display: inline-block; 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
    font-size: 80%; 
    text-align: center; 
} 

.dropMenu:hover, 
.dropMenu.selected 
{ 
    background-color: #544E4F; 
}

HTML：

<a href="#" class='dropMenu'><input type="image" src="images/down.png" name="dropDown" width="23" height="23">dropMenu</a>

沒有vertical-align : middle：

http://img140.imageshack.us/img140/7476/withoutt.png

附：

http://img834.imageshack.us/img834/904/withe.png

來源

2011-02-28 Sindar

儘量避免使用垂直對齊，它的工作方式不同使用不同的瀏覽器，並且如果您不完全瞭解它的工作原理，將會無法預測。 – HyderA 2011-02-28 17:59:02

在jsfiddle中玩耍：http://jsfiddle.net/Zfdra/1/ - 添加黑色背景以便文字可見。 – HyderA 2011-02-28 18:03:30

@gAMBOOKa：我希望SO會拒絕所有沒有jsfiddle的html/js/css問題。 – 2011-02-28 18:15:51

我剛剛通過添加標籤，並改變他的CSS找到解決方案：

按鈕

<a href="#no-reload" id='dM1' class='dropMenuButton'><input type="image" src="images/down.png" name="dropDown" width="18" height="18"><label for="dropDown">Menu</label></a>

的CSS

label 
{ 
    padding: 0 5px 0 5px; 
    vertical-align:super ; 
} 

.dropMenuButton 
{ 
    color: white; 
    text-decoration: none; 
    display: inline-block; 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
    font-size: 80%; 
    padding: 5px 5px 5px 5px; 
}

來源

2011-03-04 16:16:54 Sindar

如果你肯定知道你的選擇要適合每個選項一行，您可以使用line-height屬性設置高度，文字會自動垂直居中。

來源

2011-02-28 17:59:07 jeroen

您的意思是類似於：line -height：10px; 它不能工作 – Sindar 2011-02-28 18:01:01

@Sindar你確定10px就夠了嗎？您必須將其設置爲菜單的高度。 – jeroen 2011-02-28 18:03:02

@Sindar，如果你確定你已經擺脫了'input' *和*它的父'a'元素的所有'padding'，它可能會。 – 2011-02-28 18:03:18

居中嵌套塊的文本

回答

相關問題