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 ?

This is the button, the default one using an "a" tag.

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

and gave it a width and a height and the text remains stuck on the top..

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

I'm also trying to align the button to the center of the container and I can't figure that out either.

Thanks !

Answer 1

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