html - 无法在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-

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

我哪里错了？我如何才能让这两个文本标签位于文本区域的旁边并且垂直于文本区域顶部的一半？

谢谢。

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