How to center content

  • Resolved pullman

    (@pullman)


    14 years, 12 months ago

    Hi everyone

    I’m trying to center the swirly image on this page. I want to have some vertical and horizontal space around it but when I add it in the image settings, the image ends up on the side like that. Without the v- and h-white space it is in the centre. Ironically, in IE6 the image is displayed in the center with the whitespace added…

    The code in the WP post is:

    <p style="text-align: center;"><img class="aligncenter size-full wp-image-828" style="margin: 40px;" title="swrl" src="https://philipus.com/wp-content/uploads/2010/03/swirl1.jpg" alt="" width="113" height="70" /></p>

    I have surrounded the text and image on the right side by a div which looks like this:

    .aboutcontainer {position:relative; top:0; left:0; width: 421px; height: 633px;}

    I thought there’s something wrong with the div but removing it doesn’t change a thing.

    Thanks for any insight
    /p

Viewing 5 replies - 1 through 5 (of 5 total)

  • <p style="text-align: center; padding: 40px 0;"><img width="113" height="70" alt="" src="https://philipus.com/wp-content/uploads/2010/03/swirl1.jpg" title="swrl" class="aligncenter size-full wp-image-828"></p>

    Try:

    <img class="aligncenter size-full wp-image-828" style="margin: 40px auto;" title="swrl" src="https://philipus.com/wp-content/uploads/2010/03/swirl1.jpg" alt="" width="113" height="70" />

    Thread Starter pullman

    (@pullman)

    That was simple : sheepish smile : thanks

    Why did adding 0 or auto fix this, or rather, why didn’t adding the margin in the image settings work?

    /p

    margin:40px = set a margin of 40px on all margins: top, bottom, right & left.

    margin:40px auto = set a margin of 40px on the top & bottom margin but let the browser determine what to set on the left & right (auto).

    Setting the alignment to centre and then adding:

    style="margin-top:40px;margin-bottom:40px;>

    would also have worked but as soon as you used margin:, you effectively over-ruled the CSS that centralised the image (the left and right margin auto).

    Does that make sense now?

    Thread Starter pullman

    (@pullman)

    Yes that makes sense, thanks very much for explaining esmi.
    /p

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to center content’ is closed to new replies.