Image is not centered horizontally in the middle of the page

Question

This is my simple code:

<h1 style="text-align:center;">Title TEST</h1>
<img class="center" src="MyImage.jpg">
<footer>
  <p style="text-align:center;">Footer TEST</p>
</footer>

Text is centered correctly, the image not.. Why? I can't understand

there is nothing saying it should be, you have centred the h1 and paragraphs but not the image — Pete, Sep 13 '18 at 15:21
Possibly duplicate of https://stackoverflow.com/questions/10989238/center-align-image-within-div-horizontally?answertab=votes#tab-top — Nimitt Shah, Sep 13 '18 at 15:24
@Pete Which is why I'm asking the OP if they have a stylesheet — j08691, Sep 13 '18 at 15:24

score 1 · Answer 1 · answered Sep 13 '18 at 15:24

In your current attempt, class="center" would have no meaning unless you have a class called .center defined in your CSS. It doesn't look like you have a stylesheet, though.

Here are two ways to center an image horizontally:

Use text-align: center on a parent element:

<div style="text-align: center;">
  <h1>Title TEST</h1>
  <img src="https://via.placeholder.com/350x150" />
  <footer>
    <p>Footer TEST</p>
  </footer>
</div>

Center the image element itself by making it block-level and giving it a margin-left and margin-right of 0:

<h1 style="text-align: center;">Title TEST</h1>
<img style="display: block; margin: 0 auto;" src="https://via.placeholder.com/350x150" />
<footer>
  <p style="text-align: center;">Footer TEST</p>
</footer>

@user3518663 Glad it helped, and welcome to Stack Overflow. Please feel free to click the checkmark icon next to the most helpful answer to close the question. — Jon Uleis, Sep 13 '18 at 17:06

Image is not centered horizontally in the middle of the page

1 Answers1