HTML-CSS Center Text horizontally and vertically in a link

Question

I am trying to make a link which has a height and a width of 200px. The text of the link shall be centered vertically and horizontally.

Thi

Answer 1

If the text is only on one line, you can use line-height:200px; - where the 200px is the same as the height value.

If the text is on multiple lines and will always be on the same number of multiple lines, you can use padding combined with line-height. Example with 2 lines:

line-height:20px;
padding-top:80px;

This way the two lines will take up a total of 40px and the padding top puts them perfectly in the middle. Note that you'd need to adjust the height accordingly.

JSFiddle example.

If there is more than one link and it will have any number of lines, you will need some accompanying JavaScript to fix the padding on each.

Answer 2

Small point to add. If you remove the underline (text-decoration: none;) then the text will not be perfectly centred vertically. Links leave space for the underline. To my knowledge there is no way to override this except to add little extra top padding.

Answer 3

If the number of rows (or the inner element height) is not known, there is another trick using display: table and vertical-align:

.wrapper{
    display: table;
}
.link{
    display: table-cell;
    vertical-align: middle;
}

Example

Full article with details

Answer 4

remove all that other nonsense, and just replace height with line-height

a:link.Kachel{
   width: 200px;
   line-height: 200px;
   display: block;
   text-align: center;
   background: #383838;
}

jsfiddle: http://jsfiddle.net/6jSFY/

Answer 5

Maybe using padding? Like:

padding-top: 50%;

Answer 6

In CSS3, you can achieve this with a flexbox without any extra elements.

.link {
    display: flex;
    justify-content: center;
    align-items: center;
}