Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Aishah Griffin
Aishah Griffin
5,476 Points
Posted by Aishah Griffin
Aishah Griffin
5,476 Points

Centering two images with html and css

How can I center two images. Here is my html: <!-- Body Images--> <div class="wrapper">

                <img src="1sthome.jpg" alt="Headshot 1" id="homeimg">
                <img src="2ndhome.jpg" alt="Headshot 2" id="homeimg2">


    </div>

Here is the CSS:

homeimg {

width: 25%;
height:35%;
float: left;
padding: 10px;
text-align:center;
}

homeimg2 {

width:25%;
height: 37%;
float: left;
padding: 10px;
text-align: center;
}

3 Answers

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

:point_right: This might be a good place to use flexbox.

Remove the float properties from the images and add this rule for the wrapper:

.wrapper {
  display: flex;
  justify-content: center;
}
Justin Thomas
Justin Thomas
11,097 Points
Justin Thomas
Justin Thomas
11,097 Points

I believe you can also accomplish this by adding text-align center to the wrapper div containing the two images.

.wrapper { text-align: center; }

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

You would still have to remove the "float" properties from the images.

Aishah Griffin
Aishah Griffin
5,476 Points
Aishah Griffin
Aishah Griffin
5,476 Points

Thank you. Both methods worked when removing the float properties from the images.