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 trialThania Abrahams
972 PointsText-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>© 2015 Thania Abrahams.</p>
</footer>
1 Answer
Sam Baines
4,315 PointsHi 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
972 PointsThania Abrahams
972 PointsThank 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
4,315 PointsSam Baines
4,315 PointsOK - 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.