我在div标签中有一个包含图片的链接列表。图像的大小是动态设置的,因此高度固定为父div宽度的25%,宽度为auto。我已将float:left属性设置为图像以具有网格样式,但现在我想将图像置于div中心。这是一段代码:
<div>
<a title="gallery" href="images/silvia.b&w.jpg" data-gallery="">
<img src="thumbnails/silvia.b&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;
}
如何将图像居中?
答案 0 :(得分:2)
如果您移除float: left
,则会将其置于居中状态,并将text-align: center
与其父div相结合。
即他们的直接(第一)父div;给这个id。
答案 1 :(得分:0)
我使用:text-align:center
如果没有尝试使用宽度并使用float:left
和text-align:center