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.

This is my CSS so far:

a:link.Kachel {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  display: block;
  text-align: center;
  background: #383838;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
}

and this the HTML-code:

<tr>
  <td>
    <a class="Kachel" href="#">Test</a>
  </td>
</tr>

The text is horizontally centered but not vertically.

Any idea how to get the text centered both horizontally and virtically?

score 78 · Accepted Answer · answered Feb 13 '13 at 20:39

78

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/

answered Feb 13 '13 at 20:39

Eric Goncalves

4,955
4
31
57

1

Thanks a lot. Sometimes it is so easy :). – user1567896 Feb 13 '13 at 20:51
8

what if the link has `height: 100%`? – nicooga Sep 23 '14 at 16:39
typically line-height vertically-aligns if its set to 150%, which i would use if the a element's height were set to 100% – albert Jun 17 '15 at 15:02
10

This solution makes a lot of sense, but only if the link text is a single line. I'm currently working to find a way to vertically-align link text that ranges from 1 to several lines. – cbmtrx Nov 23 '15 at 18:40

score 39 · Answer 2 · answered Jun 04 '18 at 07:35

39

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

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

answered Jun 04 '18 at 07:35

Kilves

800
6
12

James Donnelly · Answer 3 · 2013-02-13T20:44:59.597

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.

score 3 · Answer 4 · answered Jan 10 '17 at 09:48

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

score 2 · Answer 5 · answered Nov 19 '14 at 17:15

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.

score 0 · Answer 6 · answered Jul 03 '18 at 23:55

0

Maybe using padding? Like:

padding-top: 50%;

answered Jul 03 '18 at 23:55

How does this differ from the other answers here? – Stephen Rauch Jul 04 '18 at 00:13

HTML-CSS Center Text horizontally and vertically in a link

6 Answers6

Linked