Search code examples
htmlimagealignment

HTML5 - img alignment centre not working

I am trying to align my profile picture in the middle of my webpage yet cannot seem to get it working. I have attempted both align="middle" & float methods yet it still refuses to leave the left hand side.

The code I have attempted to use (HTML5) is

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

Any help would be appreciated, thank you.

Solution

  • align attribute for the image is aligning it relativelly to the text or other images on webpage (for more info: https://www.w3schools.com/tags/att_img_align.asp).

    And notice (info from w3schools):

    "The align attribute of is not supported in HTML5. Use CSS instead."

    So align attribute will not do the trick in your case, you can center image using:

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

    instead. Here is an example:

    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>