问题:
我正在尝试调整此站点的评论框
http://www.mentby.com/Group/mono-aspnet-list/input-data-cannot-be-coded-as-a-valid-certificate.html
到我的网站。
我已经成功复制了它，但我想在中心垂直对齐标签。
它正在工作，但由于某些奇怪的原因，最后一个没有。
谁能告诉我我做错了什么/我错过了什么？
很明显，跟textarea有关系。
这是我的:
<!DOCTYPE html>
<html>
<head>
<title>Comment</title>
<style type="text/css" media="all">
label
{
cursor: text;
}
#commentForm
{
/*width: 80%;*/
width: 500px;
margin-top: 10px;
padding-bottom: 10px;
background-color: #f6f6f6;
border-right: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
border-left: 1px solid #e1e1e1;
}
#commentForm div.rowHolder
{
margin-bottom: 5px;
/*float: left;*/
}
.commentFormLabel
{
background: #efefef url(separator.gif) repeat-x top;
padding: 2px 10px 2px 10px;
margin: 0 0 20px 0;
border-bottom: 1px solid #e1e1e1;
font: bold 13pt "sans-serif", arial, verdana;
letter-spacing: -1px;
line-height: 16pt;
color: #000;
}
#commentForm label
{
display: inline-block;
width: 100px;
padding-right: 10px;
text-align: right;
/*float: left;
vertical-align: middle;
*/
font-family: "sans-serif", arial, verdana;
font-size: 9pt;
color: #333;
}
#commentForm input, #commentForm textarea
{
width: 314px;
/*float: left;*/
border: 1px solid #e7e7e7;
padding: 2px;
}
#commentForm .lblVertAlign
{
display: table-cell; vertical-align: middle;
/*background-color: Red;*/
}
</style>
</head>
<body>
<div id="commentForm">
<div class="commentFormLabel">Post a Comment</div>
<div class="formHolder">
<div class="rowHolder">
<div class="lblVertAlign">
<!--
<span style="vertical-algin: middle;">Name</span>
-->
<label for="name">Name</label>
<input id="name" name="name" value="" />
</div>
</div>
<div class="rowHolder">
<div class="lblVertAlign">
<label for="email">Email</label>
<input id="email" name="email" value="" />
</div>
</div>
<div class="rowHolder">
<div class="lblVertAlign">
<label for="website">Website</label>
<input id="website" name="website" value="http://" />
</div>
</div>
<div class="rowHolder" style="padding: 0px; margin: 0px;">
<div class="lblVertAlign">
<label for="comment">Comment</label>
<textarea id="message" name="message"></textarea>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
需要修改输入元素的vertical-align:
#commentForm input, #commentForm textarea
{
width: 314px;
/*float: left;*/
border: 1px solid #e7e7e7;
padding: 2px;
vertical-align: middle;
}
关于CSS:标签垂直对齐 - 不适用于最后一个标签 - 为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14502708/