0

テキストを重ねて表示したい。今私は持っています: http://jsfiddle.net/9DLyE/9/ しかし、この例では垂直方向の配置が機能していません: 中央。display: table; を使用してみます。および表示: テーブルセル; しかし、これは絶対位置では機能しません。http://jsfiddle.net/9DLyE/9/でどのように作成できますか?

<div id="main">
    <div>TITLE</div>
    <div>BODY</div>
    <div>COMMENT</div>
    <div><textarea></textarea></div>
    <div id="overlay">@@@@@@</div>
</div>
<button>overlay</button>

#main {
    width: 200px;
    height: 200px;
    background-color: yellow;
    position:relative
}
#overlay{
    background:rgba(0, 84, 214, 0.5);
    height:100%; width:100%;
    position:absolute;
    top:0; left:0;
    display:none;
    text-align: center;
    vertical-align: middle;
}
4

2 に答える 2

1

vertical-align: middle;オーバーレイにメインの div と同じ行の高さを与える代わりに:

#overlay {
    line-height: 200px; // the height of #main
}

デモ

于 2013-06-05T13:49:07.977 に答える