Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Having issues trying to center an image using tailwinds containers - invisible padding to the right of the image [duplicate]

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

like image 987
Blankman Avatar asked Jun 12 '20 15:06

Blankman


People also ask

How do I center an image in tailwind?

You need a container with those CSS instructions: display: flex; align-items: center; justify-content: center; In Tailwind, this translates to the classes flex items-center justify-center . Download my free CSS Handbook!

How do I align an image to the center of a container?

Step 1: Wrap the image in a div element. Step 2: Set the display property to "flex," which tells the browser that the div is the parent container and the image is a flex item. Step 3: Set the justify-content property to "center." Step 4: Set the width of the image to a fixed length value.

How do I move a div to the right in tailwind?

In Tailwind CSS, you can align a child element to the left or right side of its parent div by using the mr-auto or ml-auto utility class, respectively (we also add the flex utility to the parent).


Video Answer


1 Answers

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>
like image 199
2 revs Avatar answered Oct 27 '22 12:10

2 revs