41

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

Improve this question
1
  • This worked for me: <section class="grid place-items-center"> <img src="picsum.photos/id/1/200/300" alt="screenshot" > </section> grid - Add the element a 'display: grid' css property place-items-center - center value for the place-items css property Commented Oct 29, 2021 at 8:50

1 Answer 1

Reset to default
100

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

for flex it says '.items-center' here: tailwindcss.com/docs/align-items/#app. why?
@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)
Some hero's don't wear capes

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.