html - 无法居中图像

Question

我一直在阅读有关 stackoverflow 和其他一些关于居中图像的网站的各种帖子。我在似乎是一般指南的各个站点上找到了此代码：

img  {
display: block;
margin-left: auto;
margin-right: auto;
     }

我正在尝试使图像居中。我无法使用此代码将其居中。我可以使用 text-align: center 让它移动，但阅读这不是最好的方法。我做了一个jsfiddle。如果有人不介意帮助我，将不胜感激。通过添加随机宽度值，我也能够使图像移动。我也不认为这是正确的方法，因为我正在关注它是否居中。

抱歉，我无法显示实际图像，但 img 徽标作为占位符存在：jsFiddle

score 1 · Accepted Answer

您的代码应该可以正常工作。可能还有更多你没有向我们展示的东西。不过，这里有两种方法的演示。

基本上，如果 img 是display: block;你可以使用margin: 0 auto.

如果它是display: inline（img 标签的默认值），则父元素将需要text-align: center;它。

这里有一些代码总结：http: //jsbin.com/upuzav/1/edit

score 0 · Accepted Answer

我会为您的图像分配一个类，而不是尝试将所有图像与 html 居中。这样，如果你想改变它的位置，你可以快速，而不是使用 img 标签调整所有东西。

CSS：

.center_image {
display: block;
margin-left: auto;
margin-right: auto }

你的形象：

<img src="your_image.jpg" class="center_image">

score 0 · Accepted Answer

为了使这个技巧起作用，图像必须具有明确的宽度。请参阅http://designshack.net/articles/css/how-to-center-anything-with-css/

3 回答 3