Which magic CSS causes the difference of text-vertical-align between <button> and ?

Question

I found that the text inside of is automatically vertically centered, while text inside of

is top aligned.

I tri

Answer 1

I think you may consider one of the following solutions

Solution #1

Add these to the div style

display: table-cell;

vertical-align: middle;

If you still need to use inline-block display, you can use nested div, the parent div will be displayed as (inline-block), the child div will be displayed as (table-cell) and that's where you middle the text.

Solution #2

You can set the div padding and line height dynamically using jQuery .. and this will be done on the run time, and will be adjusted based on the size of the content inside the div. you can check this question jquery set line-height equal to parent container height