Highlighted

Image not centering

New Here ,
Oct 02, 2018

Copy link to clipboard

Copied

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

Untitled Document

Correct answer by Jaffa_Cakes | Community Beginner

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.

Views

239

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Image not centering

New Here ,
Oct 02, 2018

Copy link to clipboard

Copied

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

Untitled Document

Correct answer by Jaffa_Cakes | Community Beginner

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.

Views

240

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 02, 2018 0
Community Beginner ,
Oct 02, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 02, 2018 0
Adobe Community Professional ,
Oct 03, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 03, 2018 1
Adobe Community Professional ,
Oct 03, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 03, 2018 0
New Here ,
Oct 03, 2018

Copy link to clipboard

Copied

Thanks, that answered the question

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 03, 2018 0