Centering text within a button

Question

I\'m learning Front end development and I\'m trying to code my first site using bootstrap. I got stuck on a pretty simple thing I guess. How do I center a text within a button

Answer 1

In here you make a link as a button. You can make a button inside tag.

 <a class="btn btn-default btn-work" href=""><input type="button" class="btn btn-default btn-work" value="Check my work"/></a>

Answer 2

See this fiddle

Use

display: table-cell;
vertical-align: middle;

in your CSS for .btn-work.

So, the complete CSS would be like

.btn-work {
    width: 250px;
    height: 50px;
    margin: 0 auto;
    padding: 0;
    display: table-cell;
    vertical-align: middle;
}

And, the output of the above one be like

Answer 3

To center the text within the button. Use this code.

.btn-work{ text-align: center; }

To center the button, use a parent div to align it to center.

CSS:

 div.parentElement{text-align: center;}
 .btn-work{ display: inline-block; }

HTML:

<div class="parentElement">
    <a class="btn btn-default btn-work" href="#">Check my work</a>
</div>

Full CSS:

div.parentElement{text-align: center;}

.btn-work {
    width: 250px;
    height: 50px;
    margin: 0 auto;
    padding: 0;
    display: inline-block;
    line-height: 50px;
    text-align: center;
}