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 Gina Scalpone
Gina Scalpone
21,330 Points

Horizontally centering a list of images--pictures shifted to right

Hi, I have a list of photos that I'm trying to display in one column, down the center. For some reason, the photos are shifted to the right. At this point I've tried so many things that the code is little bit of a mess. Does anyone know why this might be happening?

Relevant code:

<div id="wrapper">
            <ul id="gallery">
                <li><a href="img/backlit-bridge.jpg">
                        <img src="img/backlit-bridge-preview.jpg" alt=""></li>
                <li><a href="img/backlit-bridge-lamp.jpg"> 
                        <img src="img/backlit-bridge-lamp-preview.jpg" alt=""></li>
                <li><a href="img/bridge.jpg">
                    <img src="img/bridge-preview.jpg" alt=""></li>
                <li><a href="img/frontlit-bridge.jpg">
                        <img src="img/frontlit-bridge-preview.jpg" alt=""></li>
                <li><a href="img/laguna-beach.jpg">
                        <img src="img/laguna-beach-preview.jpg" alt=""></li>
                <li><a href="img/gorge-sasquatch.jpg">
                    <img src="img/gorge-sasquatch-preview.jpg" alt=""></li>
                <li><a href="img/gorge-sunset.jpg">
                    <img src="img/gorge-sunset-preview.jpg" alt=""></li>
                <li><a href="img/red-andrew.jpg">
                    <img src="img/red-andrew-preview.jpg" alt=""></li>
                <li><a src="img/andrew-manzanita.jpg">
                    <img src="img/andrew-manzanita-preview.jpg"alt=""></li>
            </ul>
        </div>

#gallery {
    list-style: none;
}

#gallery li {
    width: 300px;
    padding-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
}

#gallery img {
    width: 300px;
}

3 Answers

Ed Mendoza
Ed Mendoza
9,652 Points

Hi Gina -- Browsers generally apply a set of styles to elements like the ul tag. For example my browser automatically adds padding to the ul tag. To fight this you just have to reset your #gallery to have a padding property of 0.

#gallery {
    list-style: none;
    padding: 0;
}
Gina Scalpone
Gina Scalpone
21,330 Points

That worked! Thank you!

Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

at first glance you are missing your closing anchor tags on your li's

<li>
    <a href="img/backlit-bridge.jpg">
        <img src="img/backlit-bridge-preview.jpg" alt="">
    </a>
</li>
Gina Scalpone
Gina Scalpone
21,330 Points

Whoops! It didn't fix the glitch, but that would have been a problem anyway! Thanks for pointing that out!

Robert McCormick
Robert McCormick
4,400 Points
Robert McCormick
Robert McCormick
4,400 Points

Maybe try adding the following as well:

gallery { margin: 0 auto; text-align: center; }

Robert McCormick
Robert McCormick
4,400 Points

For some reason, it didn't pick up my hash symbol before gallery, but I mean for that styling to apply to the ul with the "gallery" id.