HTML5 - img 对齐中心不起作用答案

【问题标题】：HTML5 - img alignment centre not workingHTML5 - img 对齐中心不起作用
【发布时间】：2018-03-19 11:54:21
【问题描述】：

我正在尝试将我的个人资料图片与我的网页中间对齐，但似乎无法正常工作。我尝试了 align="middle" 和 float 方法，但它仍然拒绝离开左侧。

我尝试使用的代码 (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>

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

【问题讨论】：

标签： html image alignment

【解决方案1】：

你误用了内联样式标签，正确使用方法如下：

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

如果我有该网站的 URL，我可以为您提供更多帮助。

【讨论】：

【解决方案2】：

图像的align 属性使其与网页上的文本或其他图像相对对齐（更多信息：https://www.w3schools.com/tags/att_img_align.asp）。

注意（来自 w3schools 的信息）：

“HTML5 不支持 align 属性，请改用 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>

【讨论】：

谢谢你！抱歉这么晚才回复 - 感谢为此提供帮助的每个人

【解决方案3】：

兼容性说明 HTML5 不支持 img 标签的 align 属性。改用 CSS。

要使图像居中、上或下对齐，请使用 CSS 属性。

【讨论】：