html5 - Navigation bar with vertically centered elements -
i've been trying create navigation bar meets next criteria:
spans 15% height. spans 100% width. navigation bar aligned top of site. elements within navigation bar vertically centered within it. the lastly menu alternative aligned far right of navigation bar.i've been playing <div> , <ul> implement elements. i've spent lot of time on , researched it. can't seem find way vertically center elements, images, if utilize percentage height. assume issue because <header> , <nav> elements block elements, div element, beingness "vertical-align" works on inline elements.
questions, wise plenty provide easy answers:
can utilize "vertical-align" on block elements if override "display" element "inline" value? seems reply negative. can right-align 1<li> within <ul> while other <li> left-aligned? the way can work utilize fixed height values on navigation bar padding around elements. alternative or know of way can create work percentage height? basic code express i'd (assuming <html> , other foundational tags there, too; , aware code below doesn't work shows basic idea):
<style> html, body { height: 100%; width: 100%; } .menu_bar { display: inline; /* element seems mess things pretty bad assume can't way. using <ul> within inline element allow me utilize vertical-align. */ height: 15%; width: 100%; background-color: #000000; } .menu_items { height: 100%; width: 100%; } .menu_logo { vertical-align: middle; text-align: left; } .menu_option1 { vertical-align: middle; text-align: left; } .menu_option2 { vertical-align: middle; text-align: left; } .menu_option3 { vertical-align: middle; text-align: right; } </style> <body> <header> <nav> <div class="menu_bar"> <ul class="menu_items"> <li class="menu_logo"><a href="#"><img src="images/logo.gif"></a></li> <li class="menu_option1"><a href="#"><img src="images/option1.gif"></a></li> <li class="menu_option2"><a href="#"><img src="images/option2.gif"></a></li> <li class="menu_option3"><a href="#"><img src="images/option3.gif"></a></li> </ul> </div> </nav> </header> </body> html5 css3 navigation vertical-alignment
No comments:
Post a Comment