在固定宽度的 div 中居中动态宽度 div答案

【问题标题】：Center a dynamic width div inside a fixed width div在固定宽度的 div 中居中动态宽度 div
【发布时间】：2011-07-24 17:34:54
【问题描述】：

我有相当多的 css 经验，甚至这个问题也难倒我。

我正在为 Wordpress 的 NextGen 画廊插件设置主题，这意味着我无法真正控制 HTML，并且在尝试排列图像时遇到问题。

在 NextGen 中，图像的最大尺寸为 200px x 200px。这些图像是较大图像的缩略图，每个图像在大小和尺寸方面都有自己的限制，但都在 200px x 200px 以内

主要目标：
类图像的宽度是固定的，但其宽度会根据其中的图像而变化。 imageBox 类围绕图像，其宽度固定为图像的最大宽度（200 像素宽，200 像素高）。对于不是 200px 宽的图像，我希望它们在 imageBox 的中心排列。

NextGen Gallery 生成的基本 HTML：

<div class="imageBox">
   <div class="image">
      <img />
   </div>
</div>

到目前为止我的 CSS：

.imageBox{
    width: 218px;
    height: 218px;
    float: left;
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.image{
    margin-right: 5px;
    text-align: center;
    position: absolute;
    bottom: 0px;
    display: inline-block;
}

我使用绝对定位来确保图像都沿着它们的底部边缘排列，因此底部：0px。

任何帮助都会很棒。

编辑搞砸了css，把课程弄错了。

【问题讨论】：

以防这样更容易：我知道如何轻松完成每个部分：居中 div - 左右边距自动；将 div 的底部与父 div 对齐 - 父 div 的相对位置，子组件的绝对位置，子组件的底部 0px；问题是这两件事是相互排斥的，你不能拥有一个，而拥有另一个。
我已经添加了实际的解决方案作为答案，以防有人正在寻找类似的问题

标签： html css position positioning

【解决方案1】：

试试这个：

.image{
    width: 218px;
    height: 218px;
    margin: 0 auto;
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
 }

【讨论】：

我把 css 类弄错了，抱歉。 imageBox 类是固定的，其中的图像尺寸较小（最多 200px x 200px），并且绝对位于 imageBox div 的底部。因为它的位置是绝对的，像 text-align 这样的东西不会有效果（而且由于 div 是兼容浏览器上的块级元素 text-align 不应该工作）
text-align: center 不是我回答的重点。但是这一行：margin: 0 px 好的，我很高兴你以你的方式解决了它。
不，我还没有解决。只是你的解决方案行不通。在我上面的评论中搞砸了，我的意思是 margin 0px auto 也不起作用。由于图像是绝对位置且底部为 0px，因此边距对定位没有影响

【解决方案2】：

如果您有指定的图像，这个简化的示例可以正常工作，效果很好：

<!doctype html>
<html>
<head>
    <title>Centered images</title>
    <style type="text/css">
        .imageBox
        {
            float: left;
            background: cyan;
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
        }
        img
        {
            vertical-align: middle;
            background: magenta;
            position: relative;
            bottom: 2px;
        }
    </style>
</head>
<body>
    <div class="imageBox">
        <img src="img.png" width="200px" alt="Image." />
    </div>
    <div class="imageBox">
        <img src="img.png" width="190px" alt="Image." />
    </div>
    <div class="imageBox">
        <img src="img.png" width="180px" alt="Image." />
    </div>
</body></html>

在 Internet Explorer 7 和 Opera 中，2px 存在细微的垂直差异。

这里的技巧是使用vertical-align 属性。它有点特殊，它与父元素上的line-height 属性结合使用。

更多信息：

Understanding vertical-align, or "How (Not) To Vertically Center Content"

【讨论】：

【解决方案3】：

我从未使用过 wordpress，所以我不确定有什么限制；但是你能用重要的标签覆盖他们的 css 吗？

.image{
    position: relative !important;
}

【讨论】：

唯一应用于这些元素的 css 是我的问题中显示的 css，所以 !important 不会覆盖任何东西，因为没有什么可以覆盖

【解决方案4】：

解决方案是给图像类一个固定的 200px 宽度，并将其设置为绝对位置和底部 0px。这会导致它在占据其容器的整个宽度的同时捕捉到 imageBox 类的底部。

由于图像 div 现在位于底部和全宽，所以只需将图像居中，因此我将 margin 0px auto 应用于图像 > img 类，使图像居中并解决我的问题。

这个可以看到here。

【讨论】：

所以你想让你的图片在容器底部居中？