Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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