水平居中任意图像答案

【问题标题】：Center arbitrary image horizontally水平居中任意图像
【发布时间】：2018-02-01 20:54:47
【问题描述】：

为什么将任意图像水平居中如此困难（或者正如一个答案所说，“不可能。”）？我已经有几年的集中图像工作了；突然，他们固执地坐在左边。导致此问题的 CSS 最近是否发生了一些变化？

我希望下面的从 CSS DIY 修改的代码能够工作，但它没有。

<!DOCTYPE html>
<html><head>
<style>
img { display:block; } 
</style>
</head>
<body>

<h2>Thumbnail Images</h2>
<p>  ...  </p>

<div style="margin: 0 auto;">
<img src="paris.jpg" alt="Paris" 
width=15% > 
</div>

</body></html>

我意识到按百分比宽度缩放图像是不允许的（未知原因），但 Jukka 建议我无论如何都要使用它，因为它适用于我尝试过的所有浏览器并且完全符合我的要求，即维护图像大小与页面宽度成正比。如果我将图像向右或向左浮动，它工作正常，我可以在图像旁边运行一个标题，但明显的'margin：0 auto;'失败了，我看不出有什么好的理由。

【问题讨论】：

将margin:0 auto 给img 标签而不是div 标签。

标签： html css image centering

【解决方案1】：

你应该添加样式

display:block;
margin: 0 auto;

到您的img 元素

【讨论】：

我忽略的关键要求是“显示：块；”步。之后，'margin: 0 auto;'行为符合预期。
是可选的。

【解决方案2】：

保证金：自动

您可以将 margin 属性设置为 auto 以使元素在其容器内水平居中。

然后元素会占据指定的宽度，剩余的空间会在左右边距之间平分

添加

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

<!DOCTYPE html>
<html>
<body>

<h2>Thumbnail Images</h2>
<p>  ...  </p>

<div>
<img src="https://www.w3schools.com/css/trolltunga.jpg" alt="Paris"  > 
</div>
</body>
</html>

【讨论】：

【解决方案3】：

<div style="width:100%;background:skyblue;">
  <img style='display:block;width:25%;margin:0 auto;' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvl0jMbupgXjeP66hak-u3uwUPcqI3Ovx7zqiWkVhav2V8FjeY1A'/>
</div>

【讨论】：