Question

嗨我在页面内有一个文本框，我需要水平和垂直对齐中间。我一直在尝试“显示表”方法无济于事。

问题是，当我设置表格行时，我的文本框会丢失我在其上设置的所有格式并缩小到最小尺寸，它也会粘在页面的左侧。

非常感谢任何帮助！

<div id="outer">
     <div class="inner">                           
          <textarea id="text" ></textarea>                        
     </div>
</div>

CSS

#outer{ 
  display:table-row;
  height:230px;
}

#inner{
  display:table-cell;
  vertical-align:middle;
}

#text{
    background:#e9e9e9;
    padding:10px;
    resize: none;
    font-size: 10px;
    color: #000; 
    height: 100px;
    width: 95%;  
}

Answer 1

尝试在外部div上使用display：table，在内部div上使用table-cell。

jsFiddle example （添加边框以查看对齐方式）

#outer {
    height:230px;
    border:1px solid #999;
    display:table;
    width:100%;
}
.inner {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
#text {
    background:#e9e9e9;
    padding:10px;
    resize: none;
    font-size: 10px;
    color: #000;
    height: 100px;
    width: 95%;
}

Answer 2

由于您已声明要居中的元素的高度，因此可以使用绝对居中，如here所述。只需添加一个

text-align: center

添加水平居中。

垂直对齐Textarea

2 个答案: