SSteven Posted December 17, 2018 Share Posted December 17, 2018 (edited) I have written the following code for an image card gallery. The 1st row contains 1 image card. The 2nd row contains 2 image cards. The 3rd row contains 3 image cards. The image cards are displaying correctly. However, each row must be horizontally centered, and that's not happening. How can I fix this? Thanks. https://jsfiddle.net/SSteven/zo79psbd/ Here's the CSS: <style> body { margin: 25px; } div.gallery { margin: 10px auto; width: 90% border: 1px solid #ccc; /* light gray */ float: left; } div.card { display: inline-block; background-color: white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } div.desc { text-align: center; padding: 10px 20px; } </style> And here's the HTML: <body> <h2>Image Card Gallery</h2> <!-- 1 card per row --> <div class="gallery"> <div class="card"> <img src="https://loremflickr.com/800/600/paris?random=1" alt="Paris"> <div class="desc"> <p>Paris</p> </div> </div> </div> <p style="clear: both;"> <!-- 2 cards per row --> <div class="gallery"> <div class="card"> <img src="https://loremflickr.com/400/300/rio?random=2" alt="Rio"> <div class="desc"> <p>Rio</p> </div> </div> <div class="card"> <img src="https://loremflickr.com/400/300/rio?random=3" alt="Rio"> <div class="desc"> <p>Rio</p> </div> </div> </div> <p style="clear: both;"> <!-- 3 cards per row --> <div class="gallery"> <div class="card"> <img src="https://loremflickr.com/300/200/london?random=4" alt="London"> <div class="desc"> <p>London</p> </div> </div> <div class="card"> <img src="https://loremflickr.com/300/200/london?random=5" alt="London"> <div class="desc"> <p>London</p> </div> </div> <div class="card"> <img src="https://loremflickr.com/300/200/london?random=6" alt="London"> <div class="desc"> <p>London</p> </div> </div> </div> </body> Edited December 17, 2018 by SSteven Link to comment Share on other sites More sharing options...
Ingolme Posted December 17, 2018 Share Posted December 17, 2018 Remove float: left from the gallery and add text-align: center. You're missing a semi-colon after width: 90%, so it's not being interpreted correctly. 1 Link to comment Share on other sites More sharing options...
SSteven Posted December 20, 2018 Author Share Posted December 20, 2018 OK, Thanks for this. Here's my new CSS for the div.gallery element: div.gallery { margin: 10px auto; width: 100%; text-align: center; } However, I'm not clear about a few things: 1) Why isn't float: left required in div.gallery? Is that the default for inline-block elements? 2) Why does text-align: center work? Its supposed to work for centering _text_. Here, the content of the gallery isn't text; its <div> elements. Thanks. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 20, 2018 Share Posted December 20, 2018 Display: inline-block makes the elements act as text would and aligns as text would and is newer method to using float to align elements side by side. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now