css文本垂直对齐方式从文本区域元素更改为输入元素
css文本垂直对齐方式从文本区域元素更改为输入元素
提问于 2011-08-19 17:39:30
我的css不好，不能快速解决这个问题。
我有以下html，css代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>temp</title>
<meta name="generator" content="Studio 3 http://aptana.com/">
<meta name="author" content="Subhranath Chunder">
<!-- Date: 2011-08-19 -->
<style type="text/css">
div {
width:400px;
}
p, input {
display:inline-block;
height:80px;
}
ul.error-list, li {
display:inline;
}
</style>
</head>
<body>
<div>
<p><input type="text" value="Name" name="name" /></p><ul class="error-list"><li>Error 1</li></ul>
<p><input type="text" value="Email" name="email" /></p><ul class="error-list"><li>Error 1</li></ul>
<p><textarea name="address" />Address</textarea></p><ul class="error-list"><li>Error 1</li></ul>
</div>
</body>
</html>对应于前两个输入元素的前两个错误消息垂直居中。但是，对于textarea元素，错误消息垂直显示在底部。
如果我将最后一个元素改为输入类型的元素，那么它会垂直居中。但是，我需要最后一个元素是文本区域类型。
任何人都可以修复css，并解释为什么它是这样的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2011-08-19 17:50:59
尝尝这个。
<style type="text/css">
div {
width:400px;
}
p, input, textarea {
display:inline-block;
height:80px;
}
ul.error-list, li {
display:inline;
}
textarea {
vertical-align:middle;
}
</style>至于为什么会发生这种情况：input和textarea是不同的元素，它们的行为方式也不同。可能是因为input只接受一行文本，并且默认情况下，对于您想要的输入，错误消息与文本的最下面一行对齐。但是textarea需要很多行文本，所以错误消息与元素的底部对齐，而不是元素中文本的底部。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7119727
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号