Question

如何在css中插入两个图像，将它们居中？

我想有类似的东西：link

我的实际css看起来像这样，一个图像居中：

position: absolute; 
top: 0; 
bottom:0; 
left: 0; 
right:0;
margin: auto;

Answer 1

您可以使用margin-top或right并为{c}中的position:absolute元素设置img

Live DEMO

<强> CSS：

img{
    position:absolute;
    margin-top:100px;
    right:25%;
    width:50%;
}
#leftdiv{
    position:relative;
    float:left;
    background: #e7e7e7;
    height:500px;
    width:50%;

}
#rightdiv{
    position:relative;
    float:right;
    height:500px;
    width:50%;
    background: green;

}

<强> HTML：

<div id='leftdiv'>
    <img src='http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg'/>
</div>
<div id='rightdiv'>
     <img src='http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg'/>
</div>

Answer 2

修改此示例的答案：link

检查demo

CSS

.image_container {
    width: 50%;
    height: 300px;
    line-height: 300px;
    background: #eee;
    text-align: center;
    float:left;
}

.image_container img {
    vertical-align: middle;
}

HTML

<div class="image_container">
     <image src="http://placehold.it/100x100/" height="100" width="100" alt=""/>
</div>
<div class="image_container">
     <image src="http://placehold.it/100x100/" height="100" width="100" alt=""/>
</div>

，您也可以查看page

Answer 3

设置图像容器的宽度。

设置保证金：0自动;

在css中心2个不同的图像

3 个答案: