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

Posted by Tunde Adegoroye
Tunde Adegoroye
20,597 Points

Centering imgs in list

I'm currently trying to centre the list items which have img's inside of them the header is aligned to the centre but when i am trying to centre the list items nothing seems to happen here is my code 

<section class="popular_cakes">
            <h1>Popular cakes</h1>
            <ul class="cakes">
                <li>
                    <a href="#">
                        <img src="images/popular_cakes_1.gif" alt="image of cake">
                        <p>Mocha coco cupcake</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/popular_cakes_2.gif" alt="image of cake">
                        <p>Chocolate mud Cake</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/popular_cakes_3.gif" alt="image of cake">
                        <p>Choco sponge bath</p>
                    </a>
                </li>
            </ul>
        </section>

.popular_cakes h1 {
    text-align: center;
    color: #ed2a5a;
    font-size: 2.3em
}

.popular_cakes img {
    display: block;
    margin: 10px auto;
}
      ```

3 Answers

Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Give your ul a width and see if that does the trick.

Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

The following style seems to work on my end (added a .cakes declaration to style your ul), but not sure if it's exactly what you're looking for:

.popular_cakes h1 {
    text-align: center;
    color: #ed2a5a;
    font-size: 2.3em;
}
.cakes { 
    width: 100%; 
    text-align: center; 
    padding-left: 0; 
    list-style-type: none; 
}
Geoffrey Powell
Geoffrey Powell
15,358 Points
Geoffrey Powell
Geoffrey Powell
15,358 Points

I tested your code and your h1 and images are centered as shown in your CSS. If you want to center the text under the images, just give your p element text-align: center.

Tunde Adegoroye
Tunde Adegoroye
20,597 Points
Tunde Adegoroye
Tunde Adegoroye
20,597 Points

Thanks for the replys guys i'm a bit rusty haha was targeting the li rather than the ul