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

Julia Conlan
Julia Conlan
10,189 Points
Posted by Julia Conlan
Julia Conlan
10,189 Points

Creating own website. How can I get floated un-ordered list gallery items to be the same height/size.

file:///Users/JuliaConlan/Desktop/Group%20Excercise/index.html HTML <section>

    <ul class="gallery">

<li>

<a href="services.html">
    <img src="img/personaltraining.jpg" title="Personal Training" alt="personal training">
    <p>Personal Training</p>
</a>
</li>

<li>

<a href="services.html">
    <img src="img/groupex.jpg" title="Group Exercise" alt="grouped">
    <p>Group Exercise</p>
</a>
</li>

</ul> </section>

CSS

.gallery { margin: 0; padding: 0; list-style: none; }

.gallery li { /* Photos */ display: padding: 5px; float: left; width: 45%; margin: 2.5%; border: 1px solid #ccc;

}

.gallery li a p{ /* Caption Styles */ margin: 0; padding: 5%; font-size: 1.75em; color:#bdc3c7; }

1 Answer

Wilson Usman
Wilson Usman
35,206 Points
Wilson Usman
Wilson Usman
35,206 Points

I didn't want to repeat something that's already out there. Here's the answer found on stackoverflow:

Declare the a element as display: inline-block and drop the width and height from the li element.

Alternatively, apply a float: left to the li element and use display: block on the a element. This is a bit more cross browser compatible, as display: inline-block is not supported in Firefox <= 2 for example.

The first method allows you to have a dynamically centered list if you give the ul element a width of 100% (so that it spans from left to right edge) and then apply text-align: center.

Use line-height to control the text's Y-position inside the element.

Hope this helps

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .gallery { 
            margin: 0; 
            padding: 0; 
            list-style: none; 
        }
        .gallery li { /* Photos */ 
            display: block;
            padding: 5px; 
            margin: 2.5%; 
            float: left;
            border: 1px solid #ccc;
        }
        .gallery li a { /* Caption Styles */ 
            display:block;
            line-height: 50px;
        }        
        .gallery li a p{ /* Caption Styles */ 
            margin: 0; 
            padding: 5%; 
            font-size: 1.75em; 
            color:#bdc3c7; 
        }
    </style>
</head>
<body>
<section>
    <ul class="gallery"> 
        <li>
            <a href="services.html">
                <img src="img/personaltraining.jpg" title="Personal Training" alt="personal training">
                <p>Personal Training</p>
            </a>
        </li>
        <li>
            <a href="services.html">
                <img src="img/groupex.jpg" title="Group Exercise" alt="grouped">
                <p>Group Exercise</p>
            </a>
        </li>
    </ul> 
</section>


</body>
</html>