【问题标题】: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

    【讨论】:

      猜你喜欢
      • 2014-09-02
      • 2013-03-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-07-11
      • 1970-01-01
      • 1970-01-01
      • 2017-12-10
      相关资源
      最近更新 更多