17

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
  • 248,432
  • 309
  • 736
  • 1,161
  • 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

53

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
  • 211,628
  • 17
  • 234
  • 311
  • for flex it says '.items-center' here: https://tailwindcss.com/docs/align-items/#app. why? – Blankman Jun 12 '20 at 15:54
  • 1
    @Blankman this for vertical centring or cross axis if we consider the direction (it will center horizontally only if the direction is column). For the main axis it's justify-content (you will find it below in the Doc) – Temani Afif Jun 12 '20 at 15:56