Button won't center

HTML-CSS
1

anyone any suggestions on how I can get the button to be centered? http://codepen.io/timmparsons/pen/rLbxRy

Also, how can i make it so the text will always move down into the bordered box?

Thanks

2

It looks like your button is not inside a div. So, you could wrap it in a div and then apply text-align:center to that div. Or you could just move the button inside the existing .Quote class if you wanted to. Either way, as long as you put the button in a div and add CSS to that div, it will work.

Alternatively, I also added body { text-align: center } to the top of your CSS and that centers it as well, though I wouldn’t recommend that you do it that way.

1 Like
3

Check out the following css styling:

  • text-align (in body or div)

  • text-overflow

4

5 Likes
5

When centering elements with CSS it’s good to be aware of the difference between block and inline level elements. Block elements can be centered on a page with margin: auto;, inline elements can be centered within it’s block level parent by setting text-align: center; on the parent.

The way you styled your link makes it more like a block element to me. In this case I would do this:

.button {
  display: block;
  max-width: 300px;
  margin: auto;
}

max-width being necessary because block items are 100% wide by default.

You can find some more info on the difference between block and inline elements here.

5 Likes
6

Thx. BRO! You save my life! :slight_smile:

1 Like