CODEWITHSUNDEEP
htmlcss
moonvader
moonvader

Reputation: 21091

Vertical align in menu

My menu structure is

 <div id="menu">
  <ul>
     <li><a href="#"><span>Two Words</span></a></li>
     <li><a href="#"><span>Three Words</span></a></li>
     <li><a href="#"><span>Very Long menu item</span></a></li>
     <li><a href="#"><span>Short word</span></a></li>
     <li><a href="#"><span>item5</span></a></li>
     <li><a href="#"><span>item6</span></a></li>
  </ul>
 </div>

Menu has fixed width 720px and fixed height 50px. How can i make menu items to be like on this image? enter image description here

here is my CSS

#menu {width:720px; height:50px; }
#menu ul {margin:0px; padding:0px;}
#menu ul li {display:inline; float:left; margin-left:1px;}
#menu ul li a {display:block; width:119px; height:100%;}                
#menu ul li a span {display:inline-block;vertical-align:middle;
background-color:gray; text-align:center; font-size: 14px; width:100%;}

Upvotes: 0

Views: 192

Answers (2)

John Conde
John Conde

Reputation: 219804

Here's a headstart:

#menu {
    border: 1px solid #0000ff;
    padding: 10px;
}

ul li {
    border: 1px solid #ff0000;
    display: table-cell;
    height: 80px;
    margin: 10px 5px;
    text-align: center;
    width: 80px;
    vertical-align: middle;
}

jsfiddle

Upvotes: 1

HawkEye
HawkEye

Reputation: 49

use the text-align="center" in the span tags that you have created or do the same using css.

Upvotes: 0

Related Questions