CODEWITHSUNDEEP
htmlcss
Matt
Matt

Reputation: 2327

How to vertically center text in button if text takes up two lines?

How would I go about vertically centering multiple lines of text in a button that has a specified width and height?

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

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

Upvotes: 0

Views: 1643

Answers (3)

Linus Caldwell
Linus Caldwell

Reputation: 11058

Use line-height:

a { line-height: 50px; }

This only works if the text takes up one line. If you have to deal with mulitple lines, you could make use of display: table-cell:

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

Upvotes: 2

user2283403
user2283403

Reputation:

it would be best 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; }

Upvotes: 0

H2ONOCK
H2ONOCK

Reputation: 981

Add vertical-align: middle; to your CSS.

Upvotes: 1

Related Questions