html - 无法在 div 中垂直居中文本

Question

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

我试过做

如何在 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文本而不是 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>