Centering text within a button

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

enter image description here


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;
}

Sometimes using text-align: center does not work, even on the parent element.

You may need:

padding: 0;