css文本垂直对齐从textarea元素更改为输入元素

我不擅长CSS并且无法快速解决此问题。css文本垂直对齐从textarea元素更改为输入元素

我有以下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元素，错误消息垂直位于底部。

如果我将最后一个元素更改为输入类型元素，则它会垂直居中。但是，我需要最后一个元素是textarea类型。

任何人都可以修复CSS，并解释为什么它的行为如此。

来源

2011-08-19 Subhranath Chunder

试试这个。

<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需要多行文本，因此错误消息与元素的底部对齐，而不是元素中文本的底部。

来源

2011-08-19 09:50:59 Oliver

谢谢！得到它了！ :) –

css文本垂直对齐从textarea元素更改为输入元素

回答

相关问题