Question

我遇到了一个似乎相当沉闷的问题，但我似乎无法解决它。我有以下HTML 无法更改：

<a href="#" class="aligncenter">
    <img src="http://placehold.it/240x150" alt="">
</a>

预先不知道图像的宽度。我最初使用的CSS是

a {
    display: block;
    margin: 20px auto;
    border: 1px solid #D5D5D5;
    padding: 2px;
    display: block;
}
img {
    display: block;
}

注意我无法在text-align: center的父级设置a！

有时图像和包装一样大（在下面的小提琴中body）然后没有问题。然而，有时图像小于包裹元素，在这种情况下，填充空白空间的是白色空间。请参阅this fiddle。

一种可能的解决方案是使用margin-left（使用父项的百分比值）从中心右侧定位链接，然后使用translate（使用元素的百分比值）对其进行重新定位。 See this fiddle. 但是，这不能在IE8中使用。

margin-left: 50%;
transform: translateX(-50%);

是否有一个更容易/更好的解决方案，我忽略了应该能够跨浏览器处理这种行为？我也有兴趣听取不限于IE8兼容性的想法。（例如柔性盒子，我没有经验。）

Answer 1

请尝试以下操作： Demo

img {
    display: block;
    margin: 0px auto;
}

修改： Updated Demo

所以根据你的要求我改变了这样：

的CSS：

a img {
    display: block;
    margin:0 auto;
}

Answer 2

如果将边框移至a标记，请将body { width: 320px; margin: 0 auto; border: 1px solid red; text-align: center; } a { display: inline; margin: 20px auto; display: inline-block; } img { display: block; border: 1px solid #D5D5D5; padding: 2px; margin: 0 auto; }宽度设置为100％，然后在img上设置自动边距，图像应在中间对齐。

<a href="#" class="aligncenter">
  <img src="http://placehold.it/240x150" alt="">
</a>

(ns example
  (:gen-class))

(defn -exampleMethod []
  (println (str this)))

包含图像

2 个答案: