Clever Geek Handbook

How to vertically center the text in a button if the text spans two lines?

How do I position the vertical centering of multiple lines of text using a button with a specified width and height?

<a href="#">This text will take up two lines</a>

a {
    display: inline-block
    height: 50px;
    width: 100px;
}
0


source to share


3 answers


Use line-height

:

a { line-height: 50px; }


This only works if the text spans one line. If you have to deal with multiple lines, you can use display: table-cell

:

a { display: table-cell; vertical-align: middle; }
+1


source


Add Vertically Aligned: Medium; to your CSS.



+1


source


it would be better to use% or em when dealing with line height. Different browsers render text (size) differently; when you use% it adjusts auto accordingly.

a { line-height: 1.3em; }
0


source






More articles:


All Articles