無法在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>