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元素更改爲輸入元素

回答

相關問題