Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Trent Burkenpas
Trent Burkenpas
22,388 Points

Trying 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
James Barnett
39,199 Points

Hard to say without seeing your code. Do you want to do something like this?

Imgur

Maybe this will point you in the right direction http://codepen.io/jamesbarnett/pen/hDCsm

Trent Burkenpas
Trent Burkenpas
22,388 Points

yeah but i want the photo horizontally centered and the text is below the image.

Have 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.

http://cdpn.io/hDCsm - Like this?

Trent Burkenpas
Trent Burkenpas
22,388 Points

close like the photo is horizontally centered and the text is under the photo

Now I don't understand, please explain more?

Trent Burkenpas
Trent Burkenpas
22,388 Points

I want a photo to be horizontally centered on the web page. And the text will be right under the image.

Trent Burkenpas
Trent Burkenpas
22,388 Points

That looks like a same exact one that u linked in before

Sorry, my bad! Here you go - codepen.io/anon/pen/bwKCl

Trent Burkenpas
Trent Burkenpas
22,388 Points

yeah thats how i want it..but when i resize it, it goes to the right a little

Brian Molkovich
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
Brian Molkovich
11,333 Points

the structure is next: wrap content img p