在 div 的中心水平对齐多个图像

Posted 2023-03-05

【中文标题】在 div 的中心水平对齐多个图像

【英文标题】：Aligning multiple images horizontally in the center of a div

【发布时间】：2012-03-15 02:18:40

【问题描述】：

我有一个 div，我想在该 div 的中心对齐多个图像。所有图像的高度和宽度都相同，均为 16 像素。问题是我可以将它们居中并在下方留出额外的空间，但是当我使用 display:block 删除它时，它们会再次向左对齐。这是我的代码：

我想要包含图片的div：

.cell
    position: relative;
    float: left;
    width: 300px;
    min-height: 22px;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;

    line-height: 22px;
    font-family: Arial, Verdana;
    font-size: 12px;
    color: #000;
    text-decoration: none;
    text-align: center;

    margin-bottom: 2px;
    margin-right: 2px;

上述类具有一般所需的属性。 所以我想为 img 元素创建一个类，这样它们就可以彼此相邻对齐，并且一起水平对齐。

有什么可行的建议吗？！ :)

【问题讨论】：

还有一些 html 代码呢？

这是我整理的小提琴。只是为了让事情动起来：jsfiddle.net/ah2Uw

那么你想让 div 拥抱底部的图像吗？我对您在这里真正想要做什么感到困惑。你有min-height: 22px;，所以底部会有额外的空间，因为你的图片是 16px。

你是对的。在您的解决方案中，我只是添加了单元格的高度和宽度，并且一切正常。感谢您的快速答复！ :)

【参考方案1】：

浮动块级项目会将其向左或向右推。 IMG 上的“display:inline-block”。并删除浮动和位置语句。然后为容器 div 设置“text-align:center”。

http://jsfiddle.net/B6Jsy/

我使用了一个 div 作为一个假的 img，但它应该可以工作。

【讨论】：

感谢这对我今天的帮助很大。

好答案！帮了我很多忙！

@jmbertucci 你救了我！

【参考方案2】：

<div class="Image">FIRST</div>
<div class="Image">SECOND</div>

.ImageHolder
text-align:center;


.Image
display:inline-block;