文本区域旁边的中心 div答案

【问题标题】：Center div beside textarea文本区域旁边的中心 div
【发布时间】：2011-12-04 07:02:29
【问题描述】：

我怎样才能使文本区域旁边的文本居中？

http://jsfiddle.net/47NyA/

谢谢！

【问题讨论】：

你能给出你想要达到的目标吗？谢谢:)
@shub 检查更新的答案
@shub - 为你工作？？？？
不抱歉，这对我不起作用。它将文本水平居中而不是垂直居中。
@Umer Hayat 我上传了一张图片。

标签： html css textarea center vertical-alignment

【解决方案1】：

您可以使用Javascript获取textarea的高度，并更新右侧的line-height，将文本对齐设置为居中

【讨论】：

【解决方案2】：

纯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>

【讨论】：

感谢您的帮助。我想有 CSS 的解决方案。有什么想法吗？
嗨 :) 第一个解决方案实际上是纯 CSS。

【解决方案3】：

试试这个

<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

【讨论】：