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应用于文本而不是textarea时，您最终将文本元素相对于彼此居中，但不是相对于它们与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>

不能垂直居中div中的文本

2 个答案: