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