html - 在固定宽度的 div 中居中动态宽度的 div

Question

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

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

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

主要目标:
类图像的宽度是固定的，但其宽度会根据其中的图像而变化。类 imageBox 围绕着图像并将其宽度固定为图像的最大宽度(200px 宽，200px 高)。对于宽度不是 200 像素的图像，我希望它们在 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;
}

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

任何帮助都会很棒。

编辑 搞乱了 CSS，以错误的方式设置了类。

Answer 1

试试这个:

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