如何在图像中正确居中(垂直、水平)?
<div class="category-info">
<div class="image">
<h1>Title</h1>
<img src="image.jpg" />
</div>
</div>
CSS
.category-info {
text-align: center;
height: 200px;
width: 770px;
overflow: auto;
margin-bottom: 20px;
}
图像的宽度为 770 像素,高度为 200 像素。我不知道接下来要做什么。我尝试了几件事,但没有成功。
最佳答案
给你:http://jsfiddle.net/QjLuP/4/
CSS:
.image{
position: relative;
background: green; /* IE */
}
.image h1{
z-index: 2;
position: absolute;
top: 50%;
left: 0;
right: 0;
font-size: 20px;
width: 100%;
height: 26px;
padding: 0;
margin: 0;
margin-top: -13px; /* 1/2 height */
text-align: center;
background: red;
background: rgba(170, 0, 0, 0.8); /* CSS3 */
}
.image img{
z-index: 1;
width: 100%;
height: 100%;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
background:green
}
关于html - 在 div 中将 h1 置于图像的中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14634595/