无法居中图像

Question

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

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

我试图将图像居中。我不能用这个代码集中它。我可以使用text-align：center进行移动但是读取这不是最好的方法。我做了一个jsfiddle。如果有人不介意帮助我，将不胜感激。我还可以通过添加随机宽度值来移动图像。我不认为这是正确的方法，因为我是眼球，如果它是居中的。

抱歉，我无法显示实际图片，但img徽标位于占位符中：jsFiddle

Answer 1

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

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

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

以下是一些总结的代码：http://jsbin.com/upuzav/1/edit

Answer 2

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

CSS：

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

你的形象：

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

Answer 3

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