CODEWITHSUNDEEP
htmlcss
JugglingBob
JugglingBob

Reputation: 275

Put text in center of button

For some reason, my text isnt in the vertical center of my button.

button {
    height: 35px;
    padding: 20px;
<button>
Hi
</button>

I need to keep the padding and height as it is

Upvotes: 0

Views: 62

Answers (5)

TheYaXxE
TheYaXxE

Reputation: 4294

It happens because you have set the height to 35px and the padding to 20px all around the button. That will actually make the button 40px in height.

So the solution would be to remove the top and bottom paddings, and set the height to 40px.

button {
   height: 40px;
   padding: 0 20px;
}
<button>
Hi
</button>

An alternate solution could also be to set the line-height to 0, but the above solution would be more sense, since the button is in fact 40 pixels in height and not 30.

Upvotes: 0

Tony Hensler
Tony Hensler

Reputation: 1492

button {
    height: 35px;
    padding: 20px;
    line-height: 0px;
    }
<button>
Hi
</button>
Add a line height of 0px.

Please see jsFiddle:-

https://jsfiddle.net/

Upvotes: 0

Banzay
Banzay

Reputation: 9470

button {
  height: 35px;
  padding: 0 20px;
}
<button>
Hi
</button>

Upvotes: 0

Baezid Mostafa
Baezid Mostafa

Reputation: 2728

then remove the top and bottom padding 

button {
    height: 35px;
    padding:0 20px;
}
   
<button>
Hi
</button>

Upvotes: 1

NITIN PATEL
NITIN PATEL

Reputation: 460

Try this increase height and width as per requirement

button {
    height: 50px;
    width:60
   
<button>
Hi
</button>

Upvotes: 0

Related Questions