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 How to Make a Website Styling Web Pages and Navigation Style the Image Captions

Itsik Dangoor
seal-mask
.a{fill-rule:evenodd;}techdegree
Itsik Dangoor
Front End Web Development Techdegree Student 5,330 Points
Posted by Itsik Dangoor
.a{fill-rule:evenodd;}techdegree
Itsik Dangoor
Front End Web Development Techdegree Student 5,330 Points

text-align: center; related to clear: both?

hi,

I am trying to understand the two properties, I come to see if I erase the text-align: center; and remain the line clear: both;

the two images of Twitter and Facebook will go to the left of the screen. without the text-align: center; the content of the footer will be to the left of the screen.

and I thought maybe cause it doesn't have any floating elements after the the footer and that why it's to the left, but for the experiment I add the section tag again after the footer and it comes with the same result as before?

  1. I didn't understand the property clear: both;
  2. for any type of element that I want to center it on the screen I need the text-align: center ?

thank you

3 Answers

Tyler Haas
Tyler Haas
20,623 Points

the clear property will simply tell the browser what to do with elements after floated elements. If you put clear: left it will put the element on the next line after left floats. If you put a clear: right property it will move the element to the next line after right floats. clear: both simply puts the element on the next line of both left and right floats. The following link is a great resource for understanding both floats and clear properties.

https://css-tricks.com/all-about-floats/

as for your second question there are generally two rules I use to center content. I will either use text-align: center or more commonly I will simply use margin: auto 0; That will also center things. Generally I will use text-align center for inline elements and margin auto 0 for block elements. Here is another great article again from css tricks (I really like their stuff in case you can't tell) on that:

https://css-tricks.com/centering-css-complete-guide/

Adrian Randall
Adrian Randall
4,807 Points
Adrian Randall
Adrian Randall
4,807 Points

If you put the clear:both CSS attribute on and HTML element it will essentially put it on another line so this is why they are on separate lines

By default alignment is left, so if you dont have text-align:center then it will align left.

Depending on many other things clear:both may not be doing anything either but I hope that answers your question

Jacob Mishkin
Jacob Mishkin
23,117 Points
Jacob Mishkin
Jacob Mishkin
23,117 Points

Not really. the text-align property will align the element either center, right, or left. while clear property is used with floats to "clear" or push down the preceding element.

here is a good resource to learn more about both the clear and text-align properties.

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

I hope this helps.