HTML5 - img校准中心不工作

Question

我试图在我的网页中间对齐我的个人资料图片，但似乎无法使它发挥作用。我尝试过两种align=“中间”和浮动方法，但是它仍然拒绝离开左手边。

我尝试使用的代码(HTML5)是

<header>
        <h1> Luke Johnson Portfolio</h1>

        <div class="image-cropper" style="text-align">
            <img src="lukeprofile.jpg" align="center" alt="Luke Profile Pic" class="rounded" />

        </div>
</header>

任何帮助都将不胜感激，谢谢。

Answer 1

图像的align属性是相对于网页上的文本或其他图像对齐(获取更多信息：align.asp)。

和(来自w3schools的信息)：

“HTML5中不支持对齐属性。请改用CSS。”

因此，在您的情况下，align属性做不到这一点，您可以使用以下方法对图像进行居中：

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

而不是。下面是一个示例：

​

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

<header>
  <h1> Luke Johnson Portfolio</h1>
  <div class="image-cropper" style="text-align">
    <img src="https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png" alt="Luke Profile Pic" class="rounded" />
  </div>
</header>

​

Answer 2

您滥用了内联样式标记，正确使用如下：

<div class="image-cropper" style="text-align: center"> <img src="lukeprofile.jpg" alt="Luke Profile Pic" class="rounded" /> </div>

如果我有网站的网址，我可以帮你更多的忙。

Answer 3

兼容性注释在HTML5中不支持img标记的对齐属性。使用CSS代替。

对于要对齐中间、顶部或底部的图像，请使用CSS属性。