How do I center an image

Rofl ive tried float, display, transform, padding, margin, please help.

Depends. You could set it to some percentage of the parent containers width and then use margin: auto.

I put together a small site with some examples.https://codepen.io/pethaf/pen/aPjXOJ

1 Like

You’d have to display the image with two classes:
a div class that surrounds the img element like so. It is important to use flex for responsiveness:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

Then the actual image is display as block like this:

.child {
  display: block;
}

Any other ways that work? Any other ways that work? Any other ways that work?

Can we have a screenshot of your code to see how we can help?

Hi OP. I’m also new to the HTML challenges - A good point to remember is that

img {
       margin: 0 auto;
}

Won’t center without first specifying a width, meaning your code would need to look something like this in order to center the img:

img {
       width: 100%;
       margin: 0 auto;
}
<section>
	<article>
	 <div id="img">
	 <img src="3_1.jpg" alt="banner" id="image">
	 </div>
	<article>
   </section>

Your CSS has the information we need to see why it’s not centering. Can you post that @InputLite?

Also worth noting that you’ve not closed your article tag, and also there’s probably an argument you don’t need tages at all for just displaying an image unless you want to do something very specific with it.

My original post has what I’ve tried.

What is the best way to center an image? This can’t be hard.

Someone has already answered this question with an example. If you’re looking for a solution for the html you gave us then you must first fix the html.

You have two <article> tags. I’m assuming you meant to close the other one.

then add this css:

#img {
     display: flex;
     align-items: center;
     justify-content: center;
}

@InputLite It doesn’t really. You posted some attributes and no code.

We don’t know how you’ve been implementing them and if you’ve been doing so incorrectly (which it would seem, given you can’t centre an image).

If you give us a codepen link or post the CSS then I’m sure someone would be able to help instantaneously.