因此，我正在使用 XHTML 为我的 AP 计算机科学课程创建一个网站，其中一部分任务是创建一个可点击的图像，该图像将链接到外部网站。我以前这样做过，我拥有的图像会链接，但它们不会像我告诉他们的那样对齐中心。
以下是 html 文件中的代码。
<p class="display">
<a href="http://www.minecraft.net"><img src="Images/mclogo.png" width="200%" alt="Minecraft logo linked to MC's website" /></a></p>
下面是定义“display”类的代码
p.display {text-align:center;}
您能否帮助确定我的问题。我问过我的compsci老师，他说他看不出有什么问题。
谢谢，
LordRaiden15
【问题讨论】：
只需从图像中删除 width="200%" 即可。
请看这里：http://jsfiddle.net/vX3vC/
以百分比表示的图像宽度定义了其父级宽度的百分比，而不是原始图像的百分比。实际上，您正在尝试将图像设置为父图像的两倍，但这不起作用，它会停止在 100% 处，因此无法对齐中心，因为它已经填满了整个空间。
在这里找到：http://www.w3.org/TR/html401/struct/objects.html#adef-width-IMG
请注意，以百分比表示的长度基于当前可用的水平或垂直空间，而不是图像、对象或小程序的自然大小。
要么指定宽度（以像素为单位），要么使图像尺寸正确并完全删除宽度规范。
【讨论】：
您需要将 text-align 应用于容器 P 而不是图像。
.display
{
text-align: center;
}
您还应该避免对图像进行缩放操作 (200%)，因为这会消耗浏览器资源。只需获得所需大小的高分辨率版本，或在另一个应用程序中调整图像大小。大多数情况下，对于 png 或 jpg，文件的大小只会略微增加。
【讨论】：
p.display {text-align:center;}
对我来说看起来不错。您对此页面还有其他样式规则吗？检查您是否没有更改您的 p 标签 display 属性（它必须是 block 才能有效地对齐中心。还要确保您没有对图像进行任何 floating。
您也可以尝试删除 width="200%" 并使用 CSS 设置宽度。
如果这些都不起作用，请发布一些额外的代码，或将网站公开在我们可以仔细查看的地方。
【讨论】：
div.main 的一部分，其中float 被定义为float:right;，如果我要将p.display 中的浮点数更改为float:none; 会起作用吗？
div.main 会向右浮动，但尝试为您的p.display 设置一个width 属性，该属性大于图像，您应该会看到居中行为。例如：<p class="display" style="width: 1000px;">...
您的代码现在应该可以工作（减去width="200%" 部分），所以它可能是一个浮动问题。
你想完成什么？如果您希望图像在整个页面居中，请将其从float: right; div 中取出。如果您希望将图像集中在您的小 float: right; div 中（可能作为右侧的侧边栏），请执行以下操作：http://jsfiddle.net/8vFHW/1/
当然，你应该用你的图标和文本替换你的代码，但同样的概念也存在。
【讨论】：
只需添加这个，项目就应该修复了！快乐编码！
<CENTER>
<a href="http://www.minecraft.net">
<img src="Images/mclogo.png" width="200%" alt="Minecraft logo linked to MC's website" />
</a></p>
</CENTER>
【讨论】：