HTML-CSS Center Text horizontally and vertically in a link
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/
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.
In CSS3, you can achieve this with a flexbox without any extra elements.
.link {
display: flex;
justify-content: center;
align-items: center;
}