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

Image not centering

  • October 3, 2018
  • 4 replies
  • 579 views

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

Untitled Document

    This topic has been closed for replies.
    Correct answer Jaffa Cakes

    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.

    4 replies

    K
    karina1717Author
    Known Participant
    October 3, 2018

    Thanks, that answered the question

    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.

    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

    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.

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