No se puede centrar verticalmente el texto en div

Quiero que las dos etiquetas de texto estén al lado del campo del área de texto y alineadas verticalmente en el centro de ese campo del área de texto.

He intentado hacer

Cómo alinear verticalmente elementos en HTML

y

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

pero fue en vano.

Publicaré el código de ambos intentos.

Intento 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%;
}

Intento 2-

HTML-

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

CSS-

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

¿Dónde voy mal? ¿Cómo lo consigo para que las dos etiquetas de texto estén al lado del área de texto Y estén verticalmente a la mitad de la parte superior del área de texto?

Gracias.

Answer

Cuando aplicó vertical-align:middleal texto pero no al área de texto, terminó con los elementos de texto centrados entre sí, pero no en relación con toda la línea en la que encajan junto con el área de texto. Debería funcionar si también centra el área de texto, así:

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;
}​

Prueba esto:

<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>