33

Why is my screenshot image not centered on the screen?

My css so far is this:

  <section class="hero container max-w-screen-lg mx-auto text-center pb-10">
      <div class="">
        <img src="/images/screenshot.png" alt="screenshot" width="887" height="550" />
      </div>
  </section>

When I inspect the image in chrome, I can see that there is some area on the right of the image that is not part of the image but is taking up space.

Here is a screenshot where you can see this invisible padding to the right of the image.

Any idea what is going on as I would like to understand how I can't even center a simple image.

As a bonus, if someone can figure this out using containers, can you also show me an alternate method using flex? I tried 'flex items-center' also and that didn't work for me either.

enter image description here

Blankman
  • 259,732
  • 324
  • 769
  • 1,199
  • This worked for me:
    screenshot
    grid - Add the element a 'display: grid' css property place-items-center - center value for the place-items css property     – gfjr Oct 29 '21 at 08:50

1 Answers1

88

The mx-auto should also go to the image, tailwind make the image a block element:

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet" />

<section class="hero container max-w-screen-lg mx-auto pb-10">
    <img class="mx-auto" src="https://picsum.photos/id/1/200/300" alt="screenshot" >
</section>

And with flexbox it should be justify-center

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet" />

<section class="hero container max-w-screen-lg mx-auto pb-10 flex justify-center">
    <img  src="https://picsum.photos/id/1/200/300" alt="screenshot" >
</section>

Or mx-auto on the image:

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet" />

<section class="hero container max-w-screen-lg mx-auto pb-10 flex">
    <img class="mx-auto" src="https://picsum.photos/id/1/200/300" alt="screenshot" >
</section>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415