如何在<?p>中的图像上正确居中(垂直,水平)
<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像素。我不知道下一步该做什么。我尝试了几件事,没有成功。
答案 0 :(得分:3)
在这里: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
}
答案 1 :(得分:1)
我在.image
类上抛出一个位置,并在图像元素上设置宽度和高度(这样它在加载时不会调整大小)。我将表格更改回h1
并添加了200px的行高。这是唯一的缺点,你仍然需要手动设置h1
的行高。
HTML:
<div class="category-info">
<div class="image">
<h1>Title</h1>
<img src="http://placekitten.com/770/200" />
</div>
</div>
CSS:
.category-info {
text-align: center;
margin-bottom: 20px;
}
.image{
position:relative;
}
.image img{
width:770px;
height:200px;
}
.image h1{
position:absolute;
width:100%;
color:white;
line-height:200px;
margin:0;
}
JSFiddle:http://jsfiddle.net/5wGwL/2/
答案 2 :(得分:0)
你试过这个吗?
h1 { text-align:center; }
答案 3 :(得分:0)
html
<h1 style="background-image:url(your php source.img)">Title</h1>
css:
h1 {
height: 200px;
width: 770px;
margin-bottom: 20px;
text-align:center;
vertical-align:middle;
line-height:200px;
background:transparent no-repeat scroll 50% 50%;
}
,没有别的