Question

我试图将图像置于css中心，但我的代码无效。

img.center { 
    display: block;
    margin-left: auto;
    margin-right: auto;
} 
<img src="mw3.gif" />

Answer 1

首先让我们理解这里的问题。

您的HTML是：

<img src="mw3.gif">

和CSS是：

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

现在，CSS中的img.center类的作用是它定位了具有类img的{{1}}标记。现在，如果您观察到代码，"center"标记没有附加任何类。所以，显然，这个课程不会被应用!!!

现在我们知道问题所在，让我们找到解决方案：

这里实际上有两个解决方案。使用最适合您的情况。

您可以为img标记分配img类，也可以重命名CSS类以定位"center"标记，即

解决方案1：

将课程img添加到"center"代码：

img

解决方案2：

修改CSS类以定位<img src="mw3.gif" class="center"> img.center { display: block; margin-left: auto; margin-right: auto; }标记：

img

注意：使用<img src="mw3.gif"> img { display: block; margin-left: auto; margin-right: auto; }标记的alt属性是一种很好的做法。如果无法显示图片，img属性会指定图片的替代文字。

希望这有帮助!!!

Answer 2

只需使用：（删除.center）

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

＆＃13;

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

＆＃13;

<img src="http://s.imgur.com/images/imgur.gif">

＆＃13;

Answer 3

问题是你的css没有选择你的img元素。您正在使用的css选择器正在查找类img的{{1}}元素。您可以通过以下方式更正此问题：1）从您的css选择器中移除center，以便选择器只是.center，如下所示：

img

或2）将<img src="mw3.gif" class="center" alt="MW3"> img{ display: block; margin-left: auto; margin-right: auto; }类添加到center标记中，如下所示。

img

记下<img src="mw3.gif" alt="MW3"> img{ display: block; margin-left: auto; margin-right: auto; }标记中的alt属性。 W3C需要此属性来验证<img>元素的标记。

可以找到有关<img>属性的img元素的W3C规范here。请参阅章节（4.7.1.1.2）。

Answer 4

尝试为img添加一个id并使用该id调用css样式表，然后尝试使用margin：auto;仅

Answer 5

在CSS中存在多种集中处理方式的方法，如果您想了解在CSS中居中元素的所有可能方法，请查看有关如何在CSS中居中的详细文章。