Button text align to center CSS

Question

I have a button with text currently aligned to top. I've tried using the text-align: center css but it didnt work. Please see link to the demo and advise where I am going wrong.

The code I tried.

.productButton {
    height: 130px;
    width: 200px;
    font-size: 35px;
    text-align:center;

Note: its using bootstrap along with custom css

See full working demo

http://www.codeply.com/go/PJVAHxQ2z4

Thanks

Answer 1

The text-align property specifies the horizontal alignment of text in an element.

note: not the vertical alignment of an object!

here is a possible solution for your problem:

http://www.codeply.com/go/Vi7NWQz7jb

take a close look at

.btn--text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

and the added div for this css within the label

     <label class="btn btn-default productButton">
           <div class="btn--text">ButtonText</div>
           <input type="radio" name="ButtonOne" id="buttonOne" autocomplete="off" checked>
     </label>

Answer 2

Your line-height should be the same as your height, then add vertical-align:middle; and padding-top:0 to work.

An example here: http://www.codeply.com/go/IgJ3Yrn9Kq