Question

所以我正在使用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

Answer 1

从图片中删除width =“200％”。

见这里：http://jsfiddle.net/vX3vC/

图像宽度（百分比）定义其父级宽度的百分比，而不是原始图像的百分比。事实上，你试图将图像的大小设置为父图像的两倍，这将不起作用，并且停止在100％，因此无法对齐中心，因为它已经填满了整个空间。

在此处找到：http://www.w3.org/TR/html401/struct/objects.html#adef-width-IMG

请注意，以百分比表示的长度基于当前可用的水平或垂直空间，而不是基于图像，对象或小程序的自然大小。

指定宽度（以像素为单位），或者使图像尺寸正确并完全删除宽度规格。

Answer 2

您需要将text-align应用于容器P而不是图像。

.display
{
text-align: center;
}

您还应避免对图像进行缩放操作（200％），因为这会消耗浏览器资源。只需获得所需大小的更高版本，或在另一个应用程序中调整图像大小。大多数情况下，在png或jpg的任一场景中，文件的大小只会略有增加。

Answer 3

对我来说很好看。你对这个页面有其他的风格规则吗？检查您是否未更改p代码display属性（需要block才能有效对齐中心。同时确保您没有执行任何float与图像。

您也可以尝试删除width="200%"并使用CSS设置宽度。

如果这些都不起作用，请发布一些额外的代码，或将网站公开放在我们可以仔细查看的地方。

Answer 4

您的代码现在应该正常工作（减去width="200%"部分），因此这可能是一个浮动问题。

你想完成什么？如果您希望将图像置于整个页面的中心位置，请将其从float: right; div中取出。如果您希望将图像置于小float: right; div中（可能作为右侧边栏），请执行以下操作：http://jsfiddle.net/8vFHW/1/

当然，你应该用你的图标和文字替换你的代码，但是存在相同的概念。

Answer 5

只需添加此项目即可修复！快乐的编码！

<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>

我的图像不会居中

5 个答案: