textarea旁邊的中心div

如何將textarea旁邊的文字居中？ textarea旁邊的中心div

http://jsfiddle.net/47NyA/

謝謝！

來源

2011-10-10 shub

你能不能給你想要達到什麼樣的圖像？謝謝:) –

@shub檢查更新的答案 –

@shub - 正在爲你工作???? –

嘗試用這種

<div style="display:table">  
    <label for="textarea">Description</label><br> 
    <textarea id="textarea" style="display: table-cell;"></textarea> 
    <div style="vertical-align: middle; display: table-cell; width:100px; text-align:center; border:#f00 1px solid;">Text</div> 
</div>

也爲您在Fiddle

來源

2011-10-15 06:14:53 Sanooj

您可以使用JavaScript來獲取文本區域的高度，更新的右側的行高，設置文本對齊爲中心

來源

2011-10-10 07:01:06 KMC

純CSS

http://jsfiddle.net/47NyA/7/

這可能是工作爲您提供：

<html> 
<head> 
    <title> 

    </title> 
    <style type="text/css"> 
     /* style here */ 

     div#main{ 
      position:relative; 
      vertical-align:middle; 
     } 

     textarea{ 
     } 

     div.right{ 
      position:absolute; 
      top:45%; 
      right:0px; 
      width: 100px; 
     } 
    </style> 

</head> 
<body> 
    <div id="main"> 
     <textarea></textarea> 
     <div class="right"> 
      TEXT 
     </div> 
    </div> 
</body> 
</html>

JavaScript解決方案：

這可能會爲你工作：

http://jsfiddle.net/47NyA/4/

讓我知道，如果這樣做的伎倆。

<script type="text/javascript"> 

     jQuery(document).ready(function(){ 
      // set init (default) state 
      var t = jQuery('#text_area'); 

      t.data('x', t.outerWidth()); 
      t.data('y', t.outerHeight()); 

      t.mouseup(function(){ 
       var th = jQuery(this); 
       if (th.outerWidth()!= th.data('x') || th.outerHeight() != th.data('y')) 

       // set new height/width 
       th.data('x', th.outerWidth()); 
       th.data('y', th.outerHeight()); 
       $("#center_text").css("margin-top", (th.outerHeight()/2 - 20) + "px"); 
      }); 


     }); 
</script>

來源

2011-10-10 09:53:57 zehelvion

感謝您的幫助。我想用CSS解決方案。任何想法？ – shub

嗨:)第一個解決方案實際上是純CSS。 – zehelvion

textarea旁邊的中心div

回答

相關問題