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 Joshua Holland
Joshua Holland
2,865 Points

centering image in css

Hello, I am having issues centering one particular image in CSS. I am trying to use a class selector and I'm unsure if I am doing it correctly. I tried to create the class "alex"

I tried to select the class and center it using several different properties such as margin: 0 auto; and clear: both; to remove the float. I don't know if I'm just using the class selector wrong or if the float that I have is overriding my other code, although I took .alex and moved it to the bottom of the code which should prioritize it, right?

The situation is that I have 5 images and they all have float on them but I don't want the 5th image to be aligned left as it makes the page look uneven, so I want to center the 5th image at the bottom of the page. 

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

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #222;
  color: #bdc3c7;
}

 .alex {
  clear:both;
}

Thank you in advance for any help you can offer!

3 Answers

myackley35
myackley35
34,574 Points

Yep! As long as it is lower in the cascade than "#gallery li:last-child" it should work for you.

myackley35
myackley35
34,574 Points
myackley35
myackley35
34,574 Points

Joshua, You can use the pseduo-selector ":last-child" to select that last element and modify it.

#gallery li:last-child {
  float: none;
  width: 100%;
  margin: 2.5%;
  background-color: #222;
  color: #bdc3c7;
}

You might have to tailor it from here but this should work for you.

Joshua Holland
Joshua Holland
2,865 Points

Thanks, I'll definitely give that a try! And as long as this specification is lower in the code than my initial gallery rules, it should prioritize, correct?

Matt Greenfield
Matt Greenfield
1,799 Points
Matt Greenfield
Matt Greenfield
1,799 Points

Its worth considering how this will look from a responsive point of view. You say it looks uneven - I assumer because the 5th item is wrapping down on to the next line? If so, consider that this wrapping may occur to different items based on the width of the screen.

You could consider using a grid framework or maybe just set the images to percentage widths that change based on media queries.

Just a few thoughts on the possibilities....