Question

我想叠加文字。现在我有：http://jsfiddle.net/9DLyE/9/ 但在这个例子中没有工作vertical-align：middle。我尝试使用display：table;并显示：table-cell;但这不符合绝对的位置。如何在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;
}

Answer 1

而不是vertical-align: middle;为叠加层提供与主div相同的行高：

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

Demo

Answer 2

我根本不喜欢使用桌子，但也许你可以这样做，至少这样可以保证它始终处于中间位置。



<div id="main">
    <div>TITLE</div>
    <div>BODY</div>
    <div>COMMENT</div>
    <div><textarea></textarea></div>
    <div id="overlay">
        <table id="wrapper">
            <tr>
                <td>@@@@@@</td>
            </tr>
        </table>
    </div>
</div>
<button>overlay</button>

<div id="main"> <div>TITLE</div> <div>BODY</div> <div>COMMENT</div> <div><textarea></textarea></div> <div id="overlay"> <table id="wrapper"> <tr> <td>@@@@@@</td> </tr> </table> </div> </div> <button>overlay</button>

http://jsfiddle.net/9DLyE/9/

有很多方法可以用图像来处理，但是文字有点棘手。

p.s这里是你需要的表格的CSS

#wrapper {
   height:100%;
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
}
#wrapper td {
   vertical-align: middle;
   text-align: center;
}

希望这会有所帮助。

vertical-align：middle和position：absolute

2 个答案: