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

Posted 2023-03-05

【中文标题】如何在 div 中对齐 <a><img></a> 标签

【英文标题】：How to align <a><img></a> tags withina div

【发布时间】：2014-07-06 02:51:30

【问题描述】：

我有一个 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;

如何使图像居中？

【参考方案1】：

如果您删除 float: left，它们将居中，并结合设置 text-align: center 及其父 div。

即他们的立即（第一个）父div；给它一个 id。

【讨论】：

谢谢，这就是解决方案！

【参考方案2】：

我使用：text-align:center 如果不尝试使用宽度并使用float:left 和text-align:center