Search code examples
htmlcsscenteringtext-align

How to center images on a web page for all screen sizes


I'm having a problem with my HTML. I've searched all over the internet, but still no real answer.

I have a website with some images, and I want them to be in the middle. Now, on my screen they're in the middle, but that's because I've put them there by moving them to one side. When my friends to look at it, the image is off-center.

Here's the website; if you are on a 13.5" screen it will look to be in the middle.


Solution

  • text-align:center

    Applying the text-align:center style to an element containing elements will center those elements.

    <div id="method-one" style="text-align:center">
      CSS `text-align:center`
    </div>
    

    Thomas Shields mentions this method



    margin:0 auto

    Applying the margin:0 auto style to a block element will center it within the element it is in.

    <div id="method-two" style="background-color:green">
      <div style="margin:0 auto;width:50%;background-color:lightblue">
        CSS `margin:0 auto` to have left and right margin set to center a block element within another element.
      </div>
    </div>
    

    user1468562 mentions this method


    Center tag

    My original answer was that you can use the <center></center> tag. To do this, just place the content you want centered between the tags. As of HTML4, this tag has been deprecated, though. <center> is still technically supported today (9 years later at the time of updating this), but I'd recommend the CSS alternatives I've included above.

    <h3>Method 3</h1>
    <div id="method-three">
      <center>Center tag (not recommended and deprecated in HTML4)</center>
    </div>
    

    You can see these three code samples in action in this jsfiddle.

    I decided I should revise this answer as the previous one I gave was outdated. It was already deprecated when I suggested it as a solution and that's all the more reason to avoid it now 9 years later.