3

2つのテキストタグをテキスト領域フィールドの横に配置し、そのテキスト領域フィールドの中央に垂直に配置したいと思います。

やってみた

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

どこが間違っているのですか？2つのテキストタグがテキストエリアの横に表示され、テキストエリアの上部から垂直方向に半分下がるようにするにはどうすればよいですか？

ありがとう。

4

2 に答える 2

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;
}​
于 2012-11-22T00:24:42.557 に答える
0

これを試して：

<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>
于 2012-11-22T00:36:41.783 に答える