用css居中图像不起作用答案

【问题标题】：Centering an image with css not working用css居中图像不起作用
【发布时间】：2014-09-07 05:17:47
【问题描述】：

大约 4 周前我刚开始学习网页设计课程，我对此非常感兴趣。如果有人能帮助像我这样的新手，我将不胜感激。

我不太确定这里有什么问题。该代码适用于我的一个单独文件，但是当我试图开始一个新项目，但它不再起作用了。：/

这是我的 HTML：

<!DOCTYPE html>
<html>
<head>
<title>Good Boy</title>
<link rel="stylesheet" type="text/css" href="goodboyslove.css">
<link rel="shortcut icon" href="images/GBFavicon.ico">
</head>

<body>
<a href="http://www.oriko-san.tumblr.com/"><img id="gblogo" class="center" src="images/GB.png" alt="good boy logo" width="128" height="128">

这是我的 CSS：

<!DOCTYPE css>

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

#gblogo{position:relative;top:32px;}

【问题讨论】：

@Brian 所说的，此外，以这种方式将由锚标签包裹的图像居中并不是一个好的决定。整个空间都是可点击的。尝试用块级元素包装锚并添加text-align: center;。 Demo here
我可能应该指定另一个代码工作的项目有额外的编码，但我彻底查看了所有内容，找不到任何会产生影响的东西（至少据我所知）。我 100% 肯定这不是软件错误。
JSFiddle - DEMO
哇，我不敢相信这么简单的事情会导致问题。非常感谢@Brian，这确实是问题所在。（（（：
@HashemQolami 这是我也想不通的另一个问题。非常感谢！

标签： html css image centering

【解决方案1】：

doctype 是在 CSS 文档中无效的文档类型声明。删除它将解决问题。 CSS 属于您使用链接标记的type="text/css" 声明的 MIME 类型。

Here是一篇关于HTML的介绍文章，其中包含了doctype的使用部分

【讨论】：

【解决方案2】：

试试这个！（我不保证）

您的 HTML 文件：

<!DOCTYPE html>
<html>
<head>
<title>Good Boy</title>
<link rel="stylesheet" type="text/css" href="goodboyslove.css">
<link rel="shortcut icon" href="images/GBFavicon.ico">
</head>

<body>
<a href="http://www.oriko-san.tumblr.com/"><img id="gblogo" class="center" src="images/GB.png" alt="good boy logo" width="128" height="128" /></a>
</body>

您的 CSS 文件：

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

【讨论】：

我也不保证。 relative 定位在这里有什么意义？
嗯，我是在网上找到的。我只是随机放了一些代码，结果成功了！（疯了吧？）
仅仅因为你在网上找到了一些东西，并不意味着它在所有情况下都是正确的。在这种特殊情况下，相对定位不起作用。正如 Brian 指出的那样，由于样式表中的声明无效，因此出现了问题。