居中嵌套块的文本

我需要将文本置于我的一个内嵌块按钮中。我该如何去完成这件事？任何帮助将不胜感激。居中嵌套块的文本

源代码：

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

居中嵌套块的文本

回答

相关问题