无法在div中垂直居中文本

Question

我想让两个文本标记位于文本区域字段旁边，并在该文本区域字段的中心垂直对齐。

我试着做

How to Vertically Align Elements in HTML

和

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

，但无济于事。

我会后从两个尝试代码 -

尝试1 -

HTML-

<div class="optionGroup"> 
    <div class="response"> 
     <div class="outer"> 
      <div class="middle"> 
       <div class="inner"> 
        <textarea class="correctResponse"></textarea> 
        <text class="closeButton centerVertically">&#10006;</text> 
        <text class="addButton centerVertically">&#43;</text> 
       </div> 
      </div> 
     </div> 

CSS-

.outer{ 
    display:table; 
    position:static; 
} 

.middle{ 
    display:table-cell; 
    vertical-align:middle; 
    width:100%; 
} 

尝试2-

H TML-

<textarea class="correctResponse"></textarea> 
<text class="closeButton centerVertically">&#10006;</text> 
<text class="addButton centerVertically">&#43;</text> 

CSS-

.centerVertically{ 
    line-height:100%; 
    vertical-align:middle; 
} 

我要去哪里错了？我如何得到它，以便两个文本标签来到textarea旁边，并从文本区域的顶部垂直向下一半？

谢谢。

Answer 1

当您将vertical-align:middle应用于文本而不是textarea时，最后文本元素相对于彼此居中，但与文本区域一起适合的整行不相对。它应该工作，如果你也陆续textarea的，就像这样：

HTML的

<textarea class="correctResponse centerVertically"></textarea> 
<text class="closeButton centerVertically">&#10006;</text> 
<text class="addButton centerVertically">&#43;</text>​​​​​​​​ 

CSS-

.centerVertically{ 
    line-height:100%; 
    vertical-align:middle; 
}​ 

Answer 2

试试这个：

<style> 
.centerVertically{ 
    height:100%; 
    /*vertical-align:middle;*/ 
margin: 50% 0 50% 0; 

position: absolute; 
} 
</style> 


<div class="centerVertically"> 
<textarea class="correctResponse"></textarea> 
<text class="closeButton">&#10006;</text> 
<text class="addButton">&#43;</text> 
</div>