我需要几行文本以图像为中心并且在图像上垂直居中,我在互联网上阅读了很多但我没有帮助我解决任何问题。
HTML:
<div id="textContainer">
Preparing for important meeting? <br />
<b>Drink some coffeee!</b> <br />
<img src="http://i.imgur.com/me2octq.jpg" />
</div>
<div id="baner">
<div class="imgBaner"></div>
</div>
CSS:
.imgBaner {
margin: 0 auto;
width: 100%;
height: 460px;
background: url(http://i.imgur.com/5pijCrS.jpg) no-repeat center;
position: relative;
}
#textContainer {
position: absolute;
font-size: 32px;
text-align: center;
z-index: 1;
color: yellow;
}
我还附上小提琴:http://jsfiddle.net/vXzKc/
我感谢你的每一次帮助!
答案 0 :(得分:0)
为了达到这个目的,我非常有信心你至少要知道你的文本容器的高度。然后你可以使用顶部/边距组合来解决这个问题。
据我所知,table-cell是唯一允许其内容垂直对齐的元素。我不知道为什么,但这会让你通过使用display:table-cell
做一点作弊这是我的解决方法:
HTML:
<div class="imgBaner">
<div id="textContainer">
Preparing for important meeting? <br />
<b>Drink some coffeee!</b> <br />
<img src="http://i.imgur.com/me2octq.jpg" />
</div>
</div>
CSS:
.imgBaner {
margin: 0 auto;
height: 460px;
background: url(http://i.imgur.com/5pijCrS.jpg) no-repeat center;
display: table-cell;
vertical-align: middle;
}
#textContainer {
font-size: 32px;
text-align: center;
color: yellow;
}
请注意,display:table-cell可能无法在旧浏览器中使用,或者可能导致不同的行为。我已经在最新的浏览器(IE,Firefox和Chrome)中对它进行了测试,它似乎适用于所有这些浏览器。