Невозможно вертикально центрировать текст в 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-

ЧАС 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; 
} 

Где я буду неправильно? Как получить его так, чтобы два текстовых тега оказались рядом с текстовым полем И вертикально на полпути вниз от верхней части текстовой области?

Спасибо.

Answer 1

Когда вы применили vertical-align:middle к тексту, но не в текстовом поле, вы получили текстовые элементы, центрированные относительно друг друга, но не относящиеся ко всей линии, в которую они вписываются вместе с текстовым полем. Он должен работать, если вы также центрировать текстовое поле, например, так:

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>