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

General Discussion

Posted by Henry Lopez
Henry Lopez
7,369 Points

Centering two images

Hello, I am trying to center two images side by side that have the same class name

<section class="connect" > <p>Connect with us!</p> <a href="some link"><img src="img/facebook-icon.png" alt="Facebook Logo" class="social-icon"></a> <a href="Some email"><img src="img/email-icon.png" alt="Email Logo" class="social-icon"></a> </section>

CSS:

.social-icon { text-align center

}

But this does not seem to work, if I replace .social-icon with .connect, it does but it also centers my paragraph which I do not want centered

Thanks!

4 Answers

Sterling W
Sterling W
8,142 Points
Sterling W
Sterling W
8,142 Points

You are missing the semicolon and colon, try this:

.social-icon {
       text-align:center;
}

Doing this will center everything within the tag that you identified with "social-icon".

If your paragraph, which you do not want centered, is within the same "social-icon" tag as your image it will center them both because everything within the tag is centered.

You can create a unique <div> with an identifier (like social-icon) and use the same CSS above for this identifier.

Hope this helps

ps17
ps17
8,408 Points
ps17
ps17
8,408 Points

can you show us more of your code? That way we can help you better

Henry Lopez
Henry Lopez
7,369 Points
Henry Lopez
Henry Lopez
7,369 Points

Opps forgot to post my html

<section class="connect" >
      <p>Connect with us!</p>
        <a href="some link"><img src="img/facebook-icon.png" alt="Facebook Logo" class="social-icon"></a>
         <a href="some email"><img src="img/email-icon.png" alt="Email Logo" class="social-icon"></a>
      </section>

above I want to center the images but not the Connect with us

ps17
ps17
8,408 Points
ps17
ps17
8,408 Points

try this:

.connect {
     width: 200px;       /* enter any width you want as long as it's less than 100% */
     margin: 0 auto;     /* automatically put equal margins to the left and right of .connect */
     text-align: center; /* center everything in .connect */
}

.connect p {
     text-align: left;   /* align p to the left */
}

Also, the "0" in margin means zero top and bottom margin