CODEWITHSUNDEEP
cssalignmentsass
rctneil
rctneil

Reputation: 7210

display: table-cell confusion

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

Upvotes: 0

Views: 504

Answers (2)

gherkins
gherkins

Reputation: 14983

You could use:

line-height: 30px;

Upvotes: 1

dezman
dezman

Reputation: 19358

I would use the line-height property to center vertically. I have found vertical-align rarely works, because it conflicts with other properties and browsers ignore it.

Upvotes: 0

Related Questions