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 Nedim Ljubuncic
Nedim Ljubuncic
1,022 Points

Cant get these images to center...

Cant get images to center with my css... not sure what's going wrong, I've tried to set margin:none and set display to inline...neither of those is working.

Snippet of my CSS

gallery {

margin: 0; padding: 0; list-style: none;
}

gallery li {

float:left; width:25%; margin:0%; background-color:#f5f5f5; color:#bdc3c7;
}

gallery li a p {

margin:0; padding; 5%; font-size:1em; color: #bdc3c7; }

Snippet of my HTML

<div id="wrapper"> <section> <ul id="gallery">

    <li>
      <a href="blog.html">
      <img src="images/messi.jpg">
      <p>Messi's revival</p>
      </a>
    </li>

    <li> 
      <a href="blog.html">
      <img src="images/wenger.jpg"> 
      <p>Wenger critical of Manchester Approach</p>
      </a>
    </li>

    <li>
      <a href="blog.html">
      <img src="images/cl trophy.jpg"> 
      <p>Barcelona claims 6th CL victory </p>
      </a>
    </li>

     </ul>
</section>

</div>

2 Answers

RAFAEL COSTA
RAFAEL COSTA
6,243 Points
RAFAEL COSTA
RAFAEL COSTA
6,243 Points

Your gallery li is set to float: left! How do you intend to set them do the center? I'm seeing that you have a gallery there. How do you want your gallery to look like? D you want to set various images side by side or one image at a time from top to bottom aligned on the center?

With these answers we can find a solution togheter!

Saskia Lund
Saskia Lund
5,673 Points
Saskia Lund
Saskia Lund
5,673 Points

Hi Nedim,

change your code like so:

section {
  width: 100%;
}

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

#gallery li {
float:left; 
display: inline-block; 
width:25%; 
margin: 0;
padding: 0;
background-color:#f5f5f5; 
color:#bdc3c7;
}

#gallery li img {
  width: 100%;
  height: auto;
  display: block;
}

#gallery li a p {

margin:0; 
padding; 5%; 
font-size:1em; 
color: #bdc3c7; 
text-align: center;
}