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
Trent Burkenpas
22,388 PointsTrying to center a list Item that contains a picture and paragraph.
Ok so heres my problem. I know how to center the list item, but the picture is too big. So i give it a width of 70%. But it no longer is centered when I do that. It pushes the picture and text to the left. I have no idea how to scale an image down but keep it centered.
12 Answers
James Barnett
39,199 PointsHard to say without seeing your code. Do you want to do something like this?
Maybe this will point you in the right direction http://codepen.io/jamesbarnett/pen/hDCsm
Jimmi Sassi
Front End Web Development Techdegree Student 7,076 PointsHave you tried;
ul img { max-width: 50px; max-height: 50px; }
And of course insert your own values. Don't know if it will work though.
Jimmi Sassi
Front End Web Development Techdegree Student 7,076 Pointshttp://cdpn.io/hDCsm - Like this?
Trent Burkenpas
22,388 Pointsclose like the photo is horizontally centered and the text is under the photo
Jimmi Sassi
Front End Web Development Techdegree Student 7,076 PointsNow I don't understand, please explain more?
Trent Burkenpas
22,388 PointsI want a photo to be horizontally centered on the web page. And the text will be right under the image.
Jimmi Sassi
Front End Web Development Techdegree Student 7,076 PointsLike that? http://cdpn.io/hDCsm
Trent Burkenpas
22,388 PointsThat looks like a same exact one that u linked in before
Jimmi Sassi
Front End Web Development Techdegree Student 7,076 PointsSorry, my bad! Here you go - codepen.io/anon/pen/bwKCl
Trent Burkenpas
22,388 Pointsno link lol
Jimmi Sassi
Front End Web Development Techdegree Student 7,076 Pointshttp://codepen.io/anon/pen/nkaLA - sorry lol
Trent Burkenpas
22,388 Pointsyeah thats how i want it..but when i resize it, it goes to the right a little
Brian Molkovich
11,333 Points<!====================html===================!> <div class="wrap"> <div class="content"> <img src='your image' /> <p class="text">Hello world</p> </div> </div> <!====================css====================!> .wrap{ max-width:1000px; width:90%; margin:5rem auto; } .content{ margin:30rem auto; width:20%; } .content img{ max-width:100%; text-align:center; } .content p{text-align:center;}
Brian Molkovich
11,333 Pointsthe structure is next: wrap content img p
Trent Burkenpas
22,388 PointsTrent Burkenpas
22,388 Pointsyeah but i want the photo horizontally centered and the text is below the image.