[英]Align a image and overlay text in center of page
I am trying to align a image with some text in the middle of the page. 我正在尝试将图像与页面中间的一些文本对齐。 The image gets to the center correctly , but the overlay text is off center.
图像正确地到达中心,但是覆盖文本偏离中心。 Below is the code.
下面是代码。 The text should be in the top left of the image.
文本应在图像的左上方。
<div class="w3-content">
<div class="w3-row-padding" style="text-align: center;">
<div class="w3-display-container">
<img src="w3images/house5.jpg" alt="House" style="width:50%;" class="animated fadeInRight slower">
<div class="w3-display-topleft w3-black w3-padding animated fadeInRight slower">Summer House</div>
</div>
</div>
</div>
If you need the text on top of the image, I think you should either use the image as a background image, or use absolute position. 如果您需要在图像上方添加文字,我认为您应该将图像用作背景图像,或者使用绝对位置。
.image-wrap {
position: relative;
margin: 0 auto;
width: 50%;
}
.image-wrap .text {
position: absolute;
top: 0;
}
https://jsfiddle.net/jymqj51r/ https://jsfiddle.net/jymqj51r/
Did some changes and got this to work.. THanks all 做了一些更改,使它起作用。
<div class="w3-container animated fadeInRight slower w3-white " style="float: right;">
<div class="w3-display-container" >
<div><img src="w3images/house2.jpg" ></div>
<div class="w3-display-topleft w3-black w3-padding">My Summer House</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.