How to center text horizontally and vertically within box element?

Question

Using HTML/CSS I want to create button-like link:

a.btnlink{
    border: 2px solid #808080;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    height: 50px;
    margin-bottom: 5px;
    padding: 2px;
    text-align: center;
    text-decoration: none;
    width: 200px;
}

This works fine with one exception: The text within the button box is not centered horizontally (only vertically).

How can I center the text within the box?
And: is my approach to create a button-like link correct, or can I achive that easier?

Kevin Boucher · Accepted Answer · 2013-05-25T00:28:12.783

2

Try this instead:

a.btnlink
{
    border: 2px solid #808080;
    display: inline-block;
    height: 54px;            /* height & line-height values match */
    line-height: 54px;       /* causing vertical centering (for one-line string) */
    margin-bottom: 5px;
    width: 204px;
    text-align: center;      /* centers horizontally */
    text-decoration: none;
}

edited May 25 '13 at 00:28

answered May 25 '13 at 00:19

Kevin Boucher

16,426
3
48
55

@Matthias Great! (I added some more background info too) – Kevin Boucher May 25 '13 at 00:32

Gary Klasen · Answer 2 · 2013-05-25T00:34:23.780

2

Like Kevin mentioned, display: inline-block could have been the key...

edited May 25 '13 at 00:34

answered May 25 '13 at 00:20

Gary Klasen

1,001
1
12
30

OP has `text-align: center` (just poorly formatted) – Kevin Boucher May 25 '13 at 00:24

How to center text horizontally and vertically within box element?

2 Answers2