Skip to main content
karina1717
Known Participant
October 3, 2018
Answered

Image not centering

Just getting started here. Can someone tell me why this image doesn't center when I expend the browser:

Untitled Document

    This topic is closed to new replies. Start a new post to keep the conversation going.
    Jaffa Cakes
    Jaffa CakesCorrect answer
    Inspiring
    October 3, 2018

    Hello,

    For your situation you can add the following to your IMG tag to centre the image:

    .center-img {
         display: block; /* added by Mod */
         margin-left: auto;
         margin-right: auto;
    }

    Add this class to your CSS sheet and then to your IMG tag, this will make the browser automatically apply a margin to the left and right sides of the image, essentially centring it.

    <img src="images/junk-removal-truck-2.jpg" class="center-img">

    Hope this helps!

    Edited by Moderator:

    Because an image defaults to an inline-block level element, it needs to be converted to a block level element.

    View reply

    4 replies

    karina1717Author
    Known Participant
    October 3, 2018

    Thanks, that answered the question

    Translate
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    October 3, 2018

    You already have your image inside a flex container called .big-image.  To target that image, use the following CSS selector.

    .big-image img

    Also, you need to crop your image in Photoshop to remove excess white space on the right side.

    Translate
    Nancy O'Shea— Product User & Community Expert
    hans-g.
    hans-g.
    Legend
    October 3, 2018

    Hello Karina,

    I for my part, I always have to try out these hints and so I want to send this addition referring to use Jaffa Cakes' (many thanks to you!) hint: <img src="images/junk-removal-truck-2.jpg" class="center-img"> I only had to click into the image an DW inserted the class by itself.

    Hans-Günter

    Translate
    Jaffa Cakes
    Jaffa CakesCorrect answer
    Inspiring
    October 3, 2018

    Hello,

    For your situation you can add the following to your IMG tag to centre the image:

    .center-img {
         display: block; /* added by Mod */
         margin-left: auto;
         margin-right: auto;
    }

    Add this class to your CSS sheet and then to your IMG tag, this will make the browser automatically apply a margin to the left and right sides of the image, essentially centring it.

    <img src="images/junk-removal-truck-2.jpg" class="center-img">

    Hope this helps!

    Edited by Moderator:

    Because an image defaults to an inline-block level element, it needs to be converted to a block level element.

    Translate
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices