本文介绍了垂直对齐:中间,位置:绝对的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想覆盖文字.现在我有: http://jsfiddle.net/9DLyE/9/但在此示例中,vertical-align:middle不起作用.我尝试使用display:table;并显示:table-cell;但这不适用于绝对位置.如何在 http://jsfiddle.net/9DLyE/9/中实现它?
I would like overlay with text. Now i have: http://jsfiddle.net/9DLyE/9/but in this example not working vertical-align: middle. I try use display: table; and display: table-cell; but this not working with position absolute.How can i make it in 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;
}
推荐答案
而不是 vertical-align:middle;
为叠加层提供与您的主div相同的行高:
Instead of vertical-align: middle;
give the overlay a line height that is the same as your main div:
#overlay {
line-height: 200px; // the height of #main
}
这篇关于垂直对齐:中间,位置:绝对的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!