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 Alexey Tseitlin
Alexey Tseitlin
5,866 Points

Centering a Float element.

How to center .button in the middle of the screen? tried "margin 0 auto" and "text-align: center" =(

.wrapper {
    width: 100%;
}

.button {
    float: left;
    color: white;
    border: 1px solid black;
    width: 120px;
    background: black;
}

.message {
    float: left;
    font-size: 4em;
    width: 100%;
    background: grey;
}

<div class="wrapper">
    <div class="message">Easy & Highly Customizable theme</div>
    <a href="#" class="button">Click Me</a>
</div>

3 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Alexey Tseitlin,

Check out this forum tip I made on centering floated elements. Hope this helps. :)

Alexey Tseitlin
Alexey Tseitlin
5,866 Points

I have watched the video. Adding "display: inline-block" doest help... Tried to add it to .button doesnt work. Tried to add a wrapper around the button and add .wrapper {display: inline-block}.. Dosent work(

PS: great videos =)

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Hi there Alexey.

margin: 0 auto should work but I believe it only works if it's positioned relatively rather than absolutely position. It needs a position property.

If you give an element relative position, it then positions the element centrally automatically so it could be the entire browser window or a containing element.

.button {
      position: relative:
      margin: 0 auto;
}

I believe this applies to floated elements as well but try it out. ;)

Alexey Tseitlin
Alexey Tseitlin
5,866 Points

Hi, Jonathan Grieve

Dosent work. Tried with and withoun float......

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Sounds odd, with or without floats, but hopefully Guil's link has sorted you out. :)

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

EDIT : Since you've already given your button a fixed width, you could position it relatively like this. However, I wouldn't recommend this as the best solution. Guil's video link above explains why.

.wrapper {
  width: 100%;
}

.button {
  float: left;

  /* This will center your floated element, but probably isn't the best solution. */
  position: relative;
  left: 50%;
  margin-left: -60px;

  color: white;
  border: 1px solid black;
  width: 120px;
  background: black;
}

.message {
  float: left;
  font-size: 4em;
  width: 100%;
  background: grey;
}

Do you need to specifically float those elements for your layout, or might there be a better way to achieve the same effect?

Alexey Tseitlin
Alexey Tseitlin
5,866 Points

I need. I posted the responsive part (how it will look on small screen)

rydavim
rydavim
18,814 Points

Well, I've edited my code above to center it while keeping the floats intact. However, there is probably a better solution.

Alexey Tseitlin
Alexey Tseitlin
5,866 Points

Works, but I want it to be automatic)) Hope that is possible.