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

HTML How to Make a Website CSS: Cascading Style Sheets Center the Wrapper

Posted by Thania Abrahams
Thania Abrahams
972 Points

Text-Align Seems to be Centering Images

Hi there

I cannot seem to find the cause of the images in my footer being centered, I know that this is probably something silly that I am missing but I don't want to waste any more time on this. Please can you have a look at my CSS and HTML below:

CSS:

/************************************************** GENERAL **************************************************/

body { font-family: 'Open Sans', sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; }

/************************************************** FOOTER **************************************************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #FFF; }

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

The weird thing is that the social-icons moved to the very center, after I added text-align: center - but why are my anchor elements or images being affected?

Please see HTML below:

<footer>
  <a href="http://twitter.com/thaniaabrahams"><img src="/Users/thania/Desktop/Web Development Exercises/img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
  <a href="http://facebook.com/tye_1509"><img src="/Users/thania/Desktop/Web Development Exercises/img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>
  <p>&copy; 2015 Thania Abrahams.</p>
</footer>

1 Answer

Sam Baines
Sam Baines
4,315 Points
Sam Baines
Sam Baines
4,315 Points

Hi Thania - this is an inherent value from the property text-align (it does not just apply to text but all inline elements) - this is specified in the MDN def -

: center The inline contents are centered within the line box.

So as your images display inline - they also get centered when applying this css property to the footer div, which cascades down to all the elements inside the .footer class such as your social icons.

Hope this is clear.

Thania Abrahams
Thania Abrahams
972 Points

Thank you, your answer is quite clear I guess it is just the rule that leaves me a bit confused now because it says "text" :) So does this than mean, that if I do not want images centered, I will have to specify this in another CSS rule?

Sam Baines
Sam Baines
4,315 Points
Sam Baines
Sam Baines
4,315 Points

OK - yes generally you will have to be more specific to remove this behaviour, rather than have it inherit this center position from the parent element (in this case the footer), what you will find though is that in a lot of web design the majority of elements are centered, for example in most login forms the <input> elements can be centered using the same css property. If you don't want your images centered you can target a different selector such as .footer a or .footer img - and then use the margin/position properties to adjust its location.

Remember in coding there are quite often several different ways to achieve the same desired result.