CODEWITHSUNDEEP
htmlcss
D T
D T

Reputation: 3756

Why does text of button not align in the middle?

This is html:

<button class="btncicle" >+</button>

CSS:

.btncicle {
    border-radius: 50%;
    width:15px;
    height:15px;
    padding: 0px;
    text-align:center; 
    vertical-align:middle;
    line-height: 15px;
}

I had used vertical-align or line-height , but text of button still not align to middle.

Demo

Why does text of button not align in the middle?

Upvotes: 0

Views: 1429

Answers (5)

Devanshu
Devanshu

Reputation: 933

Keep line-height less than height and width and u get perfect button. example:line-height:12px;

.btncicle {
border-radius:50%;
width:15px;
height:15px;
padding: 0px;
line-height:12px;

}

Upvotes: 0

Pons Purushothaman
Pons Purushothaman

Reputation: 2261

Please set border:none for the button, alignment will be fixed.

If you need border for the button,we have an alternate solution. You can set box-sizing: content-box;. Actually it is the default value, but in this case it is not applied. So you add it in css.

Upvotes: 1

Toan Lu
Toan Lu

Reputation: 1239

You can add another <span> inside of the button & use display: flex for this case.

It's consistent overall, even if you change the button size.

The problem here is that the character font-size is kind big. If you decrease the font-size or increase the button consistently then the + character will be certainly in the middle. 

.btncircle {
  border-radius: 50%;
  width: 15px;
  height: 15px;
  padding: 0px;
}

.btncircle span {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1px;
}


.btncircle2 {
 width: 25px;
 height: 25px;
}

.btncircle3 {
 width: 45px;
 height: 45px;
}
<button class="btncircle"><span>+</span></button>

<button class="btncircle btncircle2"><span>+</span></button>

<button class="btncircle btncircle3"><span>+</span></button>

Upvotes: 0

Alfin Paul
Alfin Paul

Reputation: 1631

use this

Increase 1 more pixel

.btncicle
{border-radius: 50%;
width: 16px;
height: 16px;
padding: 0;

text-align: center;
vertical-align: middle;
border: 1px solid;
line-height: 50%;
text-align:center;
}
<button class="btncicle" >+</button>

Upvotes: 1

user6875318
user6875318

Reputation:

Try This: Change the line-height Property.

line-height: 50%;

Upvotes: 1

Related Questions