0

I think this is a simple one but I have a row of buttons: one that is just one short word and two that are 3 long words so they run to two lines.

How can I get them to vertically center in the button? I have tried some variations of display:table-cell etc but couldn't get it exactly right.

Some code:

<div id="button_menu">  

<ul>
<li class='faq'><a href="#" tabindex="27">FAQs</a></li>
<li class='map'><a href="#" tabindex="28">Interactive Property Map</a></li>
<li class='request'><a href="#" tabindex="29">Request a Presentation</a></li>
</ul>
</div>

Here's my jsfiddle

Thanks in advance!

tyler_lisa
  • 385
  • 1
  • 5
  • 14

1 Answers1

2
#button_menu {
    font-family:"adelle", Georgia, Times, serif;
    font-size:12px;
    font-weight:700;
    float:right;

    position:relative;
}

#button_menu ul{
    list-style:none;
    margin:40px 10px 0px 0px;
    padding:0px;
    display:table;
    border-spacing:5px;
}

#button_menu ul li{
    display: table-cell;
    text-align:center;
    line-height:18px;
    height:45px;    
    padding:0px;
    vertical-align:middle;

   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px; /* future proofing */
}

JS FIDDLE: http://jsfiddle.net/MFMBR/1/ Important - you have to use border-spacing, instead of margin, because margin can't be applied to display:table-cell elements. More: Why is a div with "display: table-cell;" not affected by margin?

Community
  • 1
  • 1
sinisake
  • 11,240
  • 2
  • 19
  • 27
  • yes, that was my problem with using display:table-cell...there didn't seem to be a way to add margin to the left of each button. Thanks very much. – tyler_lisa Mar 01 '14 at 00:25