我正试图将文本放置在页面上一张图片的中间。我想在页面上其他不同高度和宽度的图片上也使用这个方法。我已经将图片相对定位,文本绝对定位,但是 bottom:0 似乎不起作用。
这是CSS代码:
这是一段英文,意思是:“这里有一个指向 jsfiddle 的链接:http://jsfiddle.net/yg4Ar/”。
<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;
}
这是一段英文,意思是:“这里有一个指向 jsfiddle 的链接:http://jsfiddle.net/yg4Ar/”。
.text
设置一个背景颜色,然后你就会看到它了,该元素从顶部拉伸到其容器元素的底部。(我可能无法实现你想要的,但这是完全不同的问题 - 这也是一个广泛讨论的话题,使用CSS居中内容几乎和Web一样古老...) - CBroe