How to align the text middle of BUTTON

Question

Can you anyone please help me to code this below one

This is my current code

<div id="loginBtn" class="loginBtn"><span>Log in</span></div> 

div tag have loginBtn class and span tag having "log in" text in html page

.loginBtn {     background:url(images/loginBtn-center.jpg) repeat-x;     width:175px;     height:65px;     margin:20px auto;     border-radius:10px;     -webkit-border-radius:10px;     box-shadow:0 1px 2px #5e5d5b; } 

I created the button using 1px image. Now i am unable to place the "log in" text middle of the image can any one help me complete the code

text is displaying left top corner. Please help me.

Answer 1

You can use text-align: center; line-height: 65px;

Demo

CSS

.loginBtn {     background:url(images/loginBtn-center.jpg) repeat-x;     width:175px;     height:65px;     margin:20px auto;     border-radius:10px;     -webkit-border-radius:10px;     box-shadow:0 1px 2px #5e5d5b;     text-align: center;  <--------- Here     line-height: 65px;   <--------- Here } 

Answer 2

This is more predictable then "line-height"

.loginBtn {      background:url(images/loginBtn-center.jpg) repeat-x;      width:175px;      height:65px;      margin:20px auto;      border-radius:10px;      -webkit-border-radius:10px;      box-shadow:0 1px 2px #5e5d5b;  }    .loginBtn span {      display: block;      padding-top: 22px;      text-align: center;      line-height: 1em;  }

<div id="loginBtn" class="loginBtn"><span>Log in</span></div>

EDIT (2018): use flexbox

.loginBtn {     display: flex;     align-items: center;     justify-content: center; }