Question

Example of problem http://img638.imageshack.us/img638/3733/97914817.jpg

我正在尝试重新编码我的一个旧表格。它充满了我想用CSS替换的表。但是我在将文本和表单元素垂直对齐时遇到问题。如图所示，文本默认从顶部开始而不是从中间开始。行周围的蓝色亮点是Dreamweavers对正在发生的事情的解释/选择。

我有一个标签和输入div，两个都在左边，在一个叫做#light的div里面，它在一个普通的容器里面。这就是我的css代码：

#contentBox{
 width: 600px;
 float: left;
 background-color: #e2e2e2;
 overflow: auto;
 border-color: #c5c5c5;
 border-width: 1px;
 border-style: solid;
 font-size: 12px;
}
#light {
 float: left;
 width: 500px;
 padding: 15px;
 background-color: #e2e2e2;
 margin: 7px;
 border-color: #c5c5c5;
 border-width: 1px;
 border-style: solid;
 vertical-align: middle;
}
input {
 float: right;
 width: 20em;

}
label {
 float: left;
 text-align: right;
 vertical-align: baseline;
}

知道问题是什么吗？我尝试在不同的div中围绕垂直对齐进行交换，浮动在不同的方向，摆脱标签，但我最终会遇到更多问题而不是更少。

Answer 1

您不能在元素上使用vertical-align，除非它们是{@ 3}}解释的表格单元格（或显示为表格单元格）。如果您只有一行文字，请将line-height设置为元素高度。

Answer 2

通常，为了解决这个问题，我使用了line-height属性：

<强>实施例

div{width:600px;font:normal normal 12px/30px Arial, Helvetica, sans-serif;}

这会将字体设置为12px，行高设置为30px，使字体垂直对齐在其行的30px内。

Answer 3

文本的垂直对齐可能非常烦人或非常容易。

如果已知所有相关元素的大小，最好的办法是在文本本身设置手动填充/边距，以确保它对齐。

如果要垂直居中的内容是动态的，this is your best bet。

Answer 4

不确定，但您的输入标记设置为“float：right”，因此父级不会考虑其高度。因此，父级的高度实际上可能是标签的高度（我怀疑Dreamweaver没有正确解释浏览器的作用。）尝试删除输入标签上的浮点数，看看它是否有所作为。

Answer 5

垂直对齐只能应用于内联元素。最好的解决方案是修改您的HTML并将其设置为this examples

Answer 6

您可以选择“便宜”解决方案并将padding-top应用于标签div。

在标签div内垂直对齐文本

6 个答案: