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
Danielle Teychenne
3,793 PointsCentering profile photo
I can't seem to center my profile photo. I have recreated the CSS correctly. When I used
display: block;
the profile image would disappear. When I used
display: inline-block;
the profile image appears with curved edges but it won't center.
3 Answers
Dustin Matlock
33,856 PointsTry this block of code see if it works. Try to understand what's going on with the code. Hope it helps!
.profile-photo {
max-width: 150px;
margin: 0px auto 30px;
border-radius: 100%;
text-align: center;
display: block;
clear: both;
}
Danielle Teychenne
3,793 PointsThanks for everyones helpful comments, I can't believe I missed the teacher's notes section. I will definitely keep my eye out for any more corrections.
Kofi Opoku
7,432 PointsTry :
.profile {
margin: 0 auto;
width: 150px;
}
The width can be whatever value you choose;
Danielle Teychenne
3,793 PointsDanielle Teychenne
3,793 PointsWorked perfectly! So I'm trying to understand how this all works.... The browser displays an image by default as inline with the text. We change that to a block display so that it has a definable width and height. So the clear: both clears any elements floated left or right which in this case was the photo floating left? Wait, why would it float left if I didn't tell it to?
Danielle Teychenne
3,793 PointsDanielle Teychenne
3,793 PointsWorked perfectly! So I'm trying to understand how this all works.... The browser displays an image by default as inline with the text. We change that to a block display so that it has a definable width and height. So the clear: both clears any elements floated left or right which in this case was the photo floating left? Wait, why would it float left if I didn't tell it to?
Dustin Matlock
33,856 PointsDustin Matlock
33,856 PointsIt looks like the float step may not have been in the lesson you were on.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Danielle,
The header is what was floated. So by having the image clear the float it means that the browser has to drop the image below all previous floated elements. This makes it drop below the header.
The fix that Dustin posted is in the Teacher's Notes section for that video. However, this fix was specific to that problem.
For a general more appropriate fix you should clear the floated header in your wrapper element since that is the first element that comes after your header. This will insure the content box for the wrapper will drop below the header.
Add to your existing
#wrapperrule:Then you won't have to do this fix for the profile photo. You can remove
clear: bothfrom.profile-photo