Alesana Alesana - 5 months ago 20
CSS Question

Vertically aligning an a tag in an li tag with dynamic height

I have a div

offers
that is dynamically sized, and then inside 6 li tags that each have 16.6% height to fill up the div. Inside each
li
tag is an
a
tag, but I want to vertically align the
a
tag. I have looked at a lot of different solutions and none of them seem to be working for me. An example of my code is;



.offers {
background-color: yellow;
height: 200px;
}
.offers li {
display: table-cell;
float: left;
vertical-align: middle;
border: solid 1px;
box-sizing: border-box;
height: 16.6%;
width: 100%
}
.offers li a {
background-color: red;
}

<div class="offers">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
<li><a href="#">Link6</a></li>
</div>





Here is a codepen - http://codepen.io/anon/pen/dXXJEY

Answer

If you want to use display table cell, replace your css in the codepen with the following and it should work:

.offers {
  background-color:yellow;
  height:200px;
  display: table; 
  width: 100%;
}
.offers li {
  display:table-row;
}
.offers li a {
  background-color:red;
  display: table-cell;
  vertical-align:middle;
  border:solid 1px black;
}
Comments