Question

为什么这么困难（或者一个答案说，“这是不可能的。”）水平居中任意图像？我有集中的图像工作了几年;他们突然顽固地坐在左边。 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建议我使用它，因为它适用于我尝试的所有浏览器，并且完全符合我的要求，这是维护图像大小与页面宽度成正比。如果我向右或向左浮动图像它工作正常，我可以在图像旁边运行一个标题，但显而易见的“边距：0自动;”失败了，没有理由我能看到。

Answer 1

保证金：自动

您可以将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>

Answer 2

您应该添加样式

display:block;
margin: 0 auto;

到img元素

Answer 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>

水平居中任意图像

3 个答案: