Menu
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.
987
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!
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.
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).
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>
answered Oct 27 '22 12:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With