Aligning text vertically using display table-cell

Question

I'm having a little bit of a problem aligning text vertically. I've tried several ways and it either aligns text vertically but then stacks the list items vertically or if I use display: inline-block the text aligns to the top. Not sure what I'm missing. Any help is truly appreciated. Thanks.

https://jsfiddle.net/u4kLvjox/

html code

<ul class="maptext">
  <a class="map-active" href="right_1.html"><li>FIRST ITEM</li></a>
  <a href="right_2.html"><li>SECOND LIST<br> ITEM</li></a>
  <a href="right_3.html"><li>THIRD LINE ITEM</li></a>
</ul>

css code

ul.maptext {
    color: #743237;
    line-height: 22px;
    font-size: 11px;
    text-align:center;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    display: inline-block;
    margin: 0;
}

ul.maptext li {
    background-color: #b0b659;
    color: #743237;
    display: inline-block;
    width: 33.3333%;
    height: 48px;
    text-align: center;
    vertical-align: middle;
}

ul.maptext a {
    line-height: 15px;
    color: #743237;
}

ul.maptext li:hover {
    background-color: #743237;
    color: #fff;
}

Answer 1

As the commenter pointed out, you need to put the <a> tags inside the <li> tags. That wills solve part of the problem.

To make the entire block clickable, give your <a> element a display: block; with a height: 100% .

Here's a full demo .

Answer 2

You can align text vertically by adding a :before style as below.

 ul.maptext { color: #743237; line-height: 22px; font-size: 11px; text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; /* display: inline-block; */ margin: 0; } ul.maptext li { background-color: #b0b659; color: #743237; display: inline-block; width: 33.3333%; height: 48px; text-align: center; vertical-align: middle; margin: 0 -2px; } ul.maptext a { line-height: 15px; color: #743237; display: block; height: 100%; } ul.maptext a:before { content: ""; display: inline-block; vertical-align: middle; width: 1px; height: 100%; } ul.maptext li:hover { background-color: #743237; color: #fff; } #mapview { width: 700px; } } 

 <div id="mapview"> <ul class="maptext"> <li><a class="map-active" href="right_1.html">FIRST ITEM</a></li> <li><a href="right_2.html">SECOND LIST ITEM</a></li> <li><a href="right_3.html">THIRD LINE ITEM</a></li> </ul> </div> 

Answer 3

To get the results you want requires less markup:

 .maptext { display: table; table-layout: fixed; height: 48px; color: #743237; line-height: 22px; font-size: 11px; font-family:Verdana, Arial, Helvetica, sans-serif; margin: 0; } .maptext a { display: table-cell; width: 33.3333%; text-align: center; vertical-align: middle; background-color: #b0b659; line-height: 15px; color: #743237; } .maptext a:hover { background-color: #743237; color: #fff; } 

 <div class="maptext" role="menu"> <a class="map-active" href="right_1.html" role="menuitem">FIRST ITEM</a> <a href="right_2.html" role="menuitem">SECOND LIST<br> ITEM</a> <a href="right_3.html" role="menuitem">THIRD LINE ITEM</a> </div> 

The only downside is that screenreaders without ARIA support lose the list structure, although the links are still accessible.

Answer 4

I'd try with

display:table-cell; 

and on parent element:

display:table;

Here is an example: fiddle

 ul.maptext { color: #743237; font-size: 11px; text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; display: table; margin: 0; width:100%; list-style-type:none; padding:0; } ul.maptext a { background-color: #b0b659; color: #743237; display: table-cell; width: 33.333%; height: 48px; text-align: center; vertical-align: middle; } ul.maptext a:hover { background-color: #743237; color: #fff; } 

 <ul class="maptext"> <a class="map-active" href="right_1.html"><li>FIRST ITEM</li></a> <a href="right_2.html"><li>SECOND LIST<br/> ITEM</li></a> <a href="right_3.html"><li>THIRD LINE ITEM</li></a> </ul>