Question

I have a set of 28 links in a wrapper div element. Each one is a letter of the alphabet plus a # for numeric and one saying “all”. Each are floated left. I want the text to be centered horizontally and vertically. With the code below I have it horizontally centered but the vertical-align: middle doesn’t seem to be having any effect when I expected it to do so as you can use that on elements that have display: table-cell. Anyone have any ideas?

a {
  float: left;
  position: relative;
  display: table-cell;
  width: 30px;
  height: 30px;
  margin: 0 4px 4px 0;
  @include border-radius(4px);
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  color: #fff;
  @include blue-gradient;

  &:nth-of-type(14n) {
    margin-right: 0;
  }

  &:hover {
    top: -1px;
  }
}

Kind regards,
Neil

Answer 1

You could use:

line-height: 30px;