使用类标识符时图像不居中答案

【问题标题】：Image not Centering when using a class identifier使用类标识符时图像不居中
【发布时间】：2014-09-26 09:24:30
【问题描述】：

我正在尝试使用 css 中的类标识符使图像居中。这应该是一个非常简单的练习。所以我很确定解决方案应该很简单。 img.center 也不起作用。我成功地将图像居中的唯一方法是仅使用 img，但我不希望所有图像居中。我在几篇关于同一主题的帖子中看到 text-align: center 应该可以工作。但这也不起作用，尝试 display: inline 在 img 元素中。

CSS

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

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Family Obsession</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans|Pacifico' rel='stylesheet'      type='text/css'>
</head>
<body>
    <div class:"center">
    <img src="http://www.mariahswind.com/stitch-wiki/bigtree.png" alt="bigtree" class:"center">
    </div>
</body>
</html>

【问题讨论】：

<div class:"center"> 应该是<div class="center">
@andrex 我知道这对我来说一定是非常愚蠢的事情！谢谢！既然您指出了这一点，那是多么明显！

标签： html css image

【解决方案1】：

您的<div> 和<img> 部分存在错误。您错误地设置了班级。应该是<div class = "center"> 和<img class = "center">

【讨论】：

【解决方案2】：

margin-left:auto（和 -right）适用于它自身的元素，因此在本例中适用于 div 和 img。

text-align:center 声明仅适用于该元素内的内容。因此，只要div 具有正确的width 集（例如100%），就可以在div 的CSS 上使用它。

也可能是父元素创建了其内容的float，这可能会停止margin-left:auto 居中方法。

【讨论】：