CODEWITHSUNDEEP
htmlcss
Becky
Becky

Reputation: 5585

center align button on page

This question seems common but I'm having problems doing it right. I got 3 buttons. I've used float: left; and float: right; for 2 of them to align to the right and left. My problem is how do I align the 3rd button to the center (on the page)?

I tried text-align: center; , margin: 0 auto; , left:0; right: 0; but no success.

Upvotes: 0

Views: 163

Answers (2)

Jeroen
Jeroen

Reputation: 63729

You need to set text-align: center; on the parent element.

#a { float: left; }
#c { float: right; }
#parent { text-align: center; }
<div id="parent">
  <button id="a">A</button>
  <button id="b">B</button>
  <button id="c">C</button>
</div>

The reasons your tried solutions didn't quite work:

  • As said above, text-align is something to be set on a parent/container element;
  • The margin: 0 auto approach is more useful for non-inline elements with a given width;
  • Setting explicit left and right will only work if you position them accordingly, but will be a hassle to use for centering because you set the element's left side (and not its center point), I'd not recommend that approacht for centering.

Some alternatives you may be interested in checking out include using flexbox (but only if you need to support modern browsers only), or using table display (probably in combination with some additional container elements around your buttons).

Upvotes: 3

Manoj Meena
Manoj Meena

Reputation: 244

<!-- html markup -->

    <div class="btn_wrap">
    <a class="btn_left">button1</a>
    <a class="btn_right">button2</a>
    <a class="btn_center">button3</a>
    </div>

/*    stylesheets */

    .btn_wrap{
    text-align:center;
    }
    .btn_left{ float:left;}
    .btn_right{ float:right;}

Upvotes: 1

Related Questions