【问题标题】: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 属性。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2015-07-16
        • 2018-06-22
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多