我试图将文字放在页面上的图像中间。我想在页面上具有不同高度和宽度的其他图像上使用它。我的图像相对定位,文字绝对定位,但底部:0似乎无法正常工作:
<div class="image">
<img src="http://lorempixel.com/300/300/">
<header class="text">
<h1>header</h1>
<a href="#">button</a>
</header>
</div>
这里是CSS:
.image {
display: inline-block;
position: relative;
}
.text {
position: absolute;
top: 0;
left: 0;
color: white;
text-align: center;
bottom: 0;
right: 0;
}
.text h1 {
text-transform: uppercase;
font-family: Helvetica, Arial;
font-size: 16px;
letter-spacing: .5px;
}
.text a {
font-size: 14px;
border: 1px solid white;
padding: 5px 30px;
color: white;
text-decoration: none;
}
指向小提琴的链接:http://jsfiddle.net/yg4Ar/
答案 0 :(得分:5)
你有:
position: absolute;
top: 0; // This keeps text top.
left: 0;
color: white;
text-align: center;
bottom: 0;
right: 0;
因此,这会使您的文字达到100%高度...因为top:0
..所以只需删除top:0
。
如果你想垂直居中你的文字,你必须为你的文字指定/计算一些高度,并将其中一半作为减去边距添加到你的CSS,并将最高值放到50%,如:
.text {
position: absolute;
top: 50%;
left: 0;
margin-top: -30px; // This should be half of your text div:s height
color: white;
text-align: center;
bottom: 0;
right: 0;
}
Example:
http://jsfiddle.net/9zyx2/
答案 1 :(得分:5)
尝试将顶部设置为百分比:
.text {
position: absolute;
top: 25%;
left: 0;
color: white;
text-align: center;
bottom: 0;
right: 0;
}
答案 2 :(得分:1)
试试这个:
.text {
position:absolute;
top: 100px;
left: 0;
color: white;
text-align: center;
bottom: 0;
right: 0;
}