Vertically center anchor tag text after setting height in css

Question

I have an anchor tag and I have given it a height and a background colour, but I can't get the text to vertically align in the middle of the background colour.

I want there to be equal background colour above and below the text, but the height is all being added below the text. I don't think that I can use padding, given the implementation of this (see the codepen link), I've also tried display: table on the parent and table-cell on the link etc, and applying a line-height.

Here is the code, but the codepen will better explain what I would like to do:

HTML:

<div class="border">
  <a href="#">Link</a>
</div>

SCSS:

.border { 
  display: inline-block;
  width: 200px;
  height: 70px;
  border: 2px solid #2BD6C5;
  position: relative;
}

a {   
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 80%;
  width: 90%;
  text-align: center;
  color: #FFF;
  font: 24px sans-serif;
  text-decoration: none;
  background-color: #2BD6C5;
  transition: 250ms ease-in;

  &:hover {
    width: 100%;
    height: 100%;
  }
}

Thanks @Sadikhasan - this is a good implementation, but it's not very repeatable if the size of the button changes. It's a little too specific with the padding, and makes it difficult to add to other buttons of various sizes. — Brett East, Mar 12 '15 at 05:15
try this : http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div/39904652#39904652 the solution works with responsive width and height. — Dashrath, Oct 06 '16 at 19:59

score 3 · Accepted Answer · edited Mar 13 '15 at 09:36

I have modified your code pen code. Please check below code or you can check it on code pen also. http://codepen.io/gauravshankar/pen/MYPEKw

body {
  background-color: #1d1f20;
}
.border {
  display: table;
  width: 200px;
  height: 70px;
  border: 2px solid #2BD6C5;
  transition: all 250ms ease-out;
  box-sizing: border-box;
  border-spacing: 10px;
}
.border:hover {
  border-spacing: 0px;
}
a {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #FFF;
  font: 24px sans-serif;
  text-decoration: none;
  background-color: #2BD6C5;
}

<div class="border">
  <a href="#">Link</a>
</div>

http://codepen.io/gauravshankar/pen/MYPEKw

This is perfect, it keeps the text completely centered throughout the duration of the animation and is repeatable across similar links. — Brett East, Mar 12 '15 at 23:34

score 1 · Answer 2 · answered Mar 12 '15 at 04:57

As long as you only have one line of text in the button, you can use line-height in order to adjust the y-position of your label.

For instance, adding

line-height: 50px;

to your a tag pretty much centers it vertically. You might have to animate it as well though if you want it centered while hovering as well.

G.L.P · Answer 3 · 2015-03-12T05:28:56.133

1

Add line-height to <a> Added Demo

a {   
  line-height:55px;
  vertical-align:middle;
}

Edit:

For Hover also you need to specify line-height to align it in middle. You can try like this:

a {  
    line-height:55px;    
}
a:hover {
    width: 100%;
    height: 100%;
    line-height:70px;
    position:relative;
}

Updated Demo

edited Mar 12 '15 at 05:28

answered Mar 12 '15 at 04:58

G.L.P

7,119
5
25
41

I've tried this and had no success, give it a go yourself in the codepen - but I couldn't get this to work. – Brett East Mar 12 '15 at 05:08
Strangely, adding the line-height works in the codepen if it's added anywhere after the "font" declaration, but doesn't work if it's added before the "font". Perhaps this is a bug in codepen. – radiaph Mar 12 '15 at 05:17
@phari - That is exactly the problem I was having. In my playing around with line-heights, i added it early in my css, but as you mentioned it works when added at the end. - Weird. – Brett East Mar 12 '15 at 23:29

score 0 · Answer 4 · answered Mar 12 '15 at 04:58

body { 
  background-color: rgb(29, 31, 32); 
}

.border { 
  display: inline-block;
  width: 200px;
  height: 70px;
  border: 2px solid #2BD6C5;
  position: relative;
}

a {   
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  /*height: 80%;*/
  width: 90%;
  text-align: center;
  color: #FFF;
  font: 24px sans-serif;
  text-decoration: none;
  background-color: #2BD6C5;
  transition: 250ms ease-in;
  padding:12px 0px;
  
  &:hover {
    width: 100%;
    height: 100%;
  }
}

<div class="border">
  <a href="#">Link</a>
</div>

remove height use padding

a {
display: inline-block;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* height: 80%; */
width: 90%;
text-align: center;
color: #FFF;
font: 24px sans-serif;
text-decoration: none;
background-color: #2BD6C5;
transition: 250ms ease-in;
padding: 12px 0px;
}

Unfortunately this doesn't allow me to fill the parent div when the a tag is hovered. See the code pen for the example. Thanks. — Brett East, Mar 12 '15 at 05:09

score 0 · Answer 5 · answered Mar 12 '15 at 05:20

You could wrap the anchor in a button and the text will automatically be centered.

JSFiddle

<div class="border">
  <button><a href="#">Link</a></button>
</div>

a {
  color: #FFF;
  text-decoration: none;
}

button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 80%;
  width: 90%;
  text-align: center;
  font: 24px sans-serif;
  text-decoration: none;
  background-color: #2BD6C5;
  transition: 250ms ease-in;
  border: none;
  cursor: pointer;

  &:hover {
    width: 100%;
    height: 100%;
  }
}

This works reasonably well, but the text is a bit shaky during the transition. — Brett East, Mar 12 '15 at 23:35

score 0 · Answer 6 · answered Mar 12 '15 at 10:18

Check this code.

body { 
  background-color: rgb(29, 31, 32); 
}

.border { 
  display: inline-block;
  width: 200px;
  height: 70px;
  border: 2px solid #2BD6C5;
  position: relative;
}

a {   
  display: inline-block;
  
  vertical-align: middle;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 80%;
  width: 90%;
  text-align: center;
  color: #FFF;
  font: 24px sans-serif;
  text-decoration: none;
  background-color: #2BD6C5;
  transition: 250ms ease-in;
  line-height: 55px;
  
}
a:hover{
  width: 100%;
    height: 100%;
    line-height: 70px;
}

<div class="border">
  <a href="#">Link</a>
</div>

Vertically center anchor tag text after setting height in css

6 Answers6