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   lt div id  loginBtn  class  loginBtn  gt  lt span gt Log in lt  span gt  lt  div gt    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

User · Answer

This is more predictable then  line-height    x000D   x000D   loginBtn   x000D      background url images loginBtn-center jpg  repeat-x  x000D      width 175px  x000D      height 65px  x000D      margin 20px auto  x000D      border-radius 10px  x000D      -webkit-border-radius 10px  x000D      box-shadow 0 1px 2px  5e5d5b  x000D    x000D   x000D   loginBtn span   x000D      display  block  x000D      padding-top  22px  x000D      text-align  center  x000D      line-height  1em  x000D    x000D   lt div id  loginBtn  class  loginBtn  gt  lt span gt Log in lt  span gt  lt  div gt  x000D   x000D   x000D    EDIT  2018   use flexbox   loginBtn       display  flex      align-items  center      justify-content  center

User · Answer

I think you can use Padding like  Hope this one can help you    loginButton       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       lt  --Using padding to align text in box or image-- gt      padding  3px 2px

User · Answer

Sometime it is fixed by the Padding    if you can play with that  then  it should fix your problem    lt style type text css gt   YourbuttonByID  Padding  20px 80px   for example  padding-left 50px    padding-right 30px  to fix the text in the middle   without interfering with the text itself     lt  style gt    It worked for me

User · Answer

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    lt --------- Here     line-height  65px     lt --------- Here

[html] How to align the text middle of BUTTON

EDIT (2018): use flexbox

Examples related to html

Examples related to css