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

Posted by Susan Siow
Susan Siow
6,497 Points

Margin 0 auto

How can I apply the margin: 0 auto to the #circle to centralize the circles without making adjustments to the floating and margin?

#circle {
display: block;
margin: 0 auto;
}
.circle-1, .circle-2, .circle-3 {
    border-radius: 50% 50% 50% 50%;
    display: block;
    float: left; <<< tried to remove this but didn't work
    font-size: 1.5em;
    height: 250px;
    line-height: 250px;
    margin: 35px;
    text-align: center;
    width: 250px;
}

link

2 Answers

Abhay Sharma
Abhay Sharma
8,287 Points

If I understand what you are trying to achieve then this will do the trick

<div class="wrap">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

.wrap{
  width: 600px;
  background-color: #f00;
  text-align: center;
}
.circle{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #ccc;
  display: inline-block;
  vertical-align: top;
  margin: 35px;
}
Susan Siow
Susan Siow
6,497 Points

Thanks so much! Now I clearly understand how important inline-block is. :)

I thought text-align: center is depreciated and thus margin: 0 auto should be used instead? And I believe the vertical-align is to align the texts in the circles but somehow it doesn't bring the texts to the center of the circles (did the test editing in Firefox).

How can I improve further? Tq.

Abhay Sharma
Abhay Sharma
8,287 Points

The vertical align: top is to align the circles to the top of the container div. With out that the circles some time don't get aligned properly and it seems like there is a margin on top of some circles.

Abhay Sharma
Abhay Sharma
8,287 Points
Abhay Sharma
Abhay Sharma
8,287 Points

Hello Susan, Firstly you can use only

border-radius: 50%;

Secondly you are specifying the margin at two places 

//under 

#circle{
    margin: 0 auto;
}

//and then under
.circle-1, .circle-2, .circle-3 {
    margin: 35px;
}
// which is overriding your first declaration

Also it will not work with float.