似乎无法修复我的图像的CSS

Question

是的 删除此删除此删除此deltete请

Answer 1

您的HTML和CSS确实需要一些帮助。 CSS中有一些未封闭的标签和一些额外的括号。无论如何，您需要更改的部分是图像的CSS。请注意更改的选择器和CSS。

.niomi img {
    display: block;
    margin: 0 auto;
}

这是一个有效的fiddle。我和CSS一起清理了HTML。它可能仍有一些问题，但我希望它可以让你开始。

Answer 2

您正在寻找的CSS是：

.niomi {
    display: block;
    width: 200px;
    margin: 0 auto;
}

div没有得到任何css更改的原因是因为你在这一行的末尾有一个额外的括号：

body { 
    background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg); }
}

这导致选择器随后被废弃。

Answer 3

您可能希望对边距进行一些读取，特别是“auto”对元素的处理。

http://www.w3schools.com/css/css_align.asp

Answer 4

你的风格没有流行的主要原因是你在}的CSS中有一个额外的body。它会导致浏览器忽略.niomi类中的所有内容。

变化：

body 
{ 
    background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg); }
}

为：

body 
{ 
    background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg);
}

然后将CSS更改为：

.niomi {
  text-align: center;
}

那应该解决它。

需要修复的最后一个不相关的问题是：

将</body>标记向下移动到最终</html>标记上方的一行。

Answer 5

您可以在图片周围的DIV上使用text-align property。类似的东西：

.niomi {
    text-align: center;
}

这将使DIV中包含的图像以及DIV中的任何其他内容居中对齐。这取决于周围的DIV是100％宽，以达到您想要的效果 - 如果您稍后移动DIV并且它变得嵌套，您最终可能会将图像偏离中心。

更好的方法是使用margin属性as found in this example。