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 Robbie Singh
Robbie Singh
3,675 Points

How can I align items to the center?

I'm trying to align the phone, email and twitter icons with my text.

This is what is currently looks like:

http://port-80-xx2t3h6fof.treehouse-app.com/contact.html

4 Answers

rydavim
rydavim
18,814 Points

You currently have your entire page text aligned center. This is likely to cause issues when you're trying to style elements with a background image. The background image is all the way to the left, while your text is still aligned center.

/* You probably don't want to be using this rule. */
#wrapper {
  text-align: center;
}

If you absolutely must keep everything center aligned, I would use the :before psudo element to place those images.

.contact-info li.phone a:before {
  content: url( "some/path/to/your/image" );
}

However, you'll have trouble resizing this image.

Robbie Singh
Robbie Singh
3,675 Points

I removed the wrapper and you brought up a good point - I don't necessarily have to center align everything. So I made some adjustments.

However, for my services and about pages, I'd like to have my headings and paragraphs centered.

Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points
Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points

I need to see your html and css code

Robbie Singh
Robbie Singh
3,675 Points

Here is the codepen link:

http://codepen.io/robbiegsingh/pen/bNMpvo

Jesus Mendoza
Jesus Mendoza
23,289 Points
Jesus Mendoza
Jesus Mendoza
23,289 Points

Hey! Try displaying your anchor links as a block and adding a little bit of padding to the left

.contact-info li.phone a, .contact-info li.mail, contact-info li.twitter a {
  display: block;
  padding-left: 20px;
}
Robbie Singh
Robbie Singh
3,675 Points

Hi Jesus, thanks for helping out! - for some reason, only the mail icon moved slightly to the left but it also pushed the text further to the right as well.

Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points
Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points

here's your answer Robbie Singh :

.contact-info {
  list-style: none;
  font-size: 0.9em;

}

.contact-info li.phone a {
  background-image: url('../img/bear.jpg')
}

.contact-info li.mail a {
  background-image: url('../img/mountains.jpg')
}

.contact-info li.twitter a {
  background-image: url('../img/resort.jpg')
}

.contact-info li a {
      display: inline-block;
      background-repeat: no-repeat;
      background-size: 20px 20px;
      padding-left: 30px;
      margin: 0 0 10px 0;
}