如何在div中对齐<a><img/></a>个标记

时间:2014-05-17 20:32:41

标签: html css href

我在div标签中有一个包含图片的链接列表。图像的大小是动态设置的,因此高度固定为父div宽度的25%,宽度为auto。我已将float:left属性设置为图像以具有网格样式,但现在我想将图像置于div中心。这是一段代码:

 <div>
    <a title="gallery" href="images/silvia.b&amp;w.jpg" data-gallery="">
        <img src="thumbnails/silvia.b&amp;w.jpg_New.jpg" style="height: 162.55625px;">
    </a>
    <a title="gallery" href="images/silvia 165.jpg" data-gallery="">
        <img src="thumbnails/silvia 165.jpg_New.jpg" style="height: 162.55625px;">
    </a>
    ...other images
 </div>

和css:

#text a img{
    position:relative;
    margin:0.5%;
    float: left;
    border: 1px solid #999;
    padding: 0.5%;
    background: #000;
    -webkit-filter: grayscale(100%);
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    -ms-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}
#text a img:hover {
    -webkit-filter: none;
    -webkit-transform: scale(1.85,1.85);
    -moz-transform: scale(1.85,1.85);
    -o-transform: scale(1.85,1.85);
    -ms-transform: scale(1.85,1.85);
    transform: scale(1.85,1.85);
    z-index:100;
}

如何将图像居中?

2 个答案:

答案 0 :(得分:2)

如果您移除float: left,则会将其置于居中状态,并将text-align: center与其父div相结合。

即他们的直接(第一)父div;给这个id。

答案 1 :(得分:0)

我使用:text-align:center 如果没有尝试使用宽度并使用float:lefttext-align:center