html - css vertical and horizontal alignment issues -
i'd align menu items , logo-picture both horizontally , vertically in red div. how achieve that? i've tried set margin left , right auto vertical-align center, didn't work. help
see: http://jsfiddle.net/gm2wzl6z/
html:
<div id="nav-container"> <nav> <ul id="navlist"> <li id="active"><a href="#" id="current">item one</a> </li> <li><a href="#">item two</a> </li> <li><a href="#">item three</a> </li> <li> <img src="http://lorempixel.com/output/fashion-q-g-227-148-4.jpg"> </li> <li><a href="#">item four</a> </li> <li><a href="#">item five</a> </li> </ul> </nav> </div>
css:
#nav-container { height: 300px; background: red; } #navlist li { display: inline; list-style-type: none; padding-right: 20px; }
use display:table/table-cell
vertical-align
:
#nav-container { height: 300px; background: red; display:table; width:100%; } #nav-container nav{ display: table-cell; height: 300px; vertical-align: middle; text-align:center; } #nav-container nav li{ display:inline-block; vertical-align: middle; }
<div id="nav-container"> <nav> <ul id="navlist"> <li id="active"><a href="#" id="current">item one</a> </li> <li><a href="#">item two</a> </li> <li><a href="#">item three</a> </li> <li> <img src="http://lorempixel.com/output/fashion-q-g-227-148-4.jpg"> </li> <li><a href="#">item four</a> </li> <li><a href="#">item five</a> </li> </ul> </nav> </div>
Comments
Post a Comment