Question

我正在尝试使用css中的类标识符来居中图像。这应该是一个非常简单的练习。所以我很确定解决方案应该很简单。 img.center也不起作用。只有我成功地将我的图像放到中心的方法才是img，但我不希望所有图像都居中。我在几篇文章中看到过text-align：center应该有效的相同主题。但这也不起作用，尝试显示：在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>

Answer 1

您的<div>和<img>部分出现错误。你错误地设置了你的课程。它应该是<div class = "center">和<img class = "center">

Answer 2

margin-left:auto（和-right）适用于它自己的元素，因此在这种情况下适用于div以及img。

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

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

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

2 个答案: