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

mrx3
mrx3
8,742 Points
Posted by mrx3
mrx3
8,742 Points

I'm having trouble centering my social media icons in a site I'm making.

I would like the two icons in the footer to be centered in the middle. But for some reason I can't get then to center right. My code is below, and thanks in advance for any help. My html and CSS are below. For the life of me, I can't figure this out. I even used Nick's CSS, and I still can't get it right.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mr. X | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <!-- Google Fonts Go Here -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1>My Portfolio</h1>
        <nav class="nav">
          <ul>
            <li><a href="index.html">Homepage</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>
      </header>
      <div class="main-content group">
        <h3>Computer Pictures</h3>
        <ul class="gallery">
          <li>
            <a href="img/dna.jpg">
              <img src="img/dna.jpg" alt="">
              <p>Computer DNA</p>
            </a>
          </li>
          <li>
            <a href="img/fingerprint.jpg">
              <img src="img/fingerprint.jpg" alt="">
              <p>Computer Fingerprint</p>
            </a>
          </li>
          <li>
            <a href="img/lock.jpg">
              <img src="img/lock.jpg" alt="">
              <p>Computer Lock</p>
            </a>
          </li>
          <li>
            <a href="img/matrix.jpg">
              <img src="img/matrix.jpg" alt="">
              <p>Computer Matrix</p>
            </a>
          </li>
          <li>
            <a href="img/numbers.jpg">
              <img src="img/numbers.jpg" alt="">
              <p>Random Computer Numbers</p>
            </a>
          </li>
        </ul>
      </div>
      <footer>
        <p>Mr X &copy; 2014</p>
        <a href="http://twitter.com" target="_blank"><img src="img/twitter-wrap.png" alt="" class="social-icon"></a>
        <a href="http://facebook.com" target="_blank"><img src="img/facebook-wrap.png" alt="" class="social-icon"></a>
      </footer>
    <div>
  </body>
</html>

/*************************
Setting the box size rule
**************************/

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}


/*******************************
Adding a background to the body
********************************/

body {
  background: #000;
  line-height: 2em;
}


/**********************
Centering the .wrapper
***********************/

.wrapper {
  max-width: 960px;
  margin: 0 auto;
}


/***************************
Styling the header section
****************************/

h1 {
  background: #DCDCDC;
  margin: 0;
  padding: 25px;
  text-align: center;
}


/***********************
Styling the navigation
************************/

.nav {
  background: #A9A9A9;
  font-size: 1.1em;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.nav li {
  display: inline;
}

.nav ul {
  margin: 0;
  padding: 0;
}

.nav a {
  display: inline-block;
  padding: 12px;
  text-decoration: none;
}


/**************************************
Styling the navigation pseudo elements
***************************************/
.nav a:link {
  color: #000;
}

.nav a:visited {
  color: #800080;
}

.nav a:hover {
  color: #fff;
}

.nav a:active {
  color: #0000FF;
}


/*************************
Styling the h3 header
**************************/

h3 {
  margin: 0;
  padding: 15px;
  text-align: center;
}

/**************************
Applying the clearfix hack
***************************/

.group:after {
  content: "";
  display: table;
  clear: both;
}


/*********************************
Styling the .main-content section
**********************************/

.main-content {
  background: #D3D3D3;
}


/**************************
Styling the gallery/images
***************************/

img {
  max-width: 100%;
}

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

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

.gallery li a {
  text-align: center;
  text-decoration: none;
}

.gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: grey;
}

/**************************
Styling the footer section
***************************/

footer {
  background: #DCDCDC;
}


footer p{
  font-size: 1.2em;
  font-weight: bold;
  margin-top: 0;
  padding-top: 15px;
  text-align: center;
}


/******************************
Styling the social media icons
*******************************/

.social-icon {
 width: 50px;
  height: 50px;
  margin: 0 5px;
}

5 Answers

George Cristian Manea
George Cristian Manea
30,787 Points

If you set text-align center for the footer tag it will work

mrx3
mrx3
8,742 Points
mrx3
mrx3
8,742 Points

Hi George, thanks for the input. I thought it was wrong to use text-align center for images?

George Cristian Manea
George Cristian Manea
30,787 Points
George Cristian Manea
George Cristian Manea
30,787 Points

It's ok, because an image is an inline element, and that's the way to center it.

mrx3
mrx3
8,742 Points
mrx3
mrx3
8,742 Points

Okay. Thank you for the help. I was working on this for awhile now. I really appreciate it. I'm going to leave this open for a little while to see if anyone else has some input. If no one else answers, I will select yours as the best answer.

Aaron Graham
Aaron Graham
18,033 Points
Aaron Graham
Aaron Graham
18,033 Points

I tend to agree with George Cristian Manea. Applying a text-align: center; to an element to center all of its content seems like a pretty legit thing to do. If I were centering a single image I might use something like display: block; width: XXX%; margin: 0 auto;, but in your situation, where you are trying to center two images on one line, I think this would be a real mess. You would have to wrap your images in another block element that is exactly the size of the images and center that.

mrx3
mrx3
8,742 Points
mrx3
mrx3
8,742 Points

Hi Aaron thanks for the reply. If I use display block it stacks the images on top of each other. So I think I will go with the text-align like you suggest.

Adama Sy
Adama Sy
7,076 Points
Adama Sy
Adama Sy
7,076 Points

you have this little issue where you have /********************** Centering the .wrapper ***********************/

.wrapper { max-width: 960px; margin: 0 auto;??????? }

auto or 0?

try also to set all offset to 0 , this also help center icons .

Michael Hulet
Michael Hulet
47,913 Points
Michael Hulet
Michael Hulet
47,913 Points

To answer your question, margin: 0 auto; specifies that you want no margin on the top and bottom, but it should be centered left to right

Adama Sy
Adama Sy
7,076 Points
Adama Sy
Adama Sy
7,076 Points

the way mine is and works maybe something u can check

.icon { background-color: #39add1; margin-top: 34px; height: 180px; border-radius: 5px; position: relative; } .icon::after { content: ""; display: block; width: 150px; height: 90px; background: url('../img/icon.png') no-repeat; background-size: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }