HTML CSS examples for CSS Widget:Menu
Horizontal menu in center with image inbetween
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!-- www .jav a 2s.co m--> width:auto; background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png'); background-size:cover; margin:3px 0 0 0; } #menu { height:211px; line-height:37px; margin:0 auto; text-align:center; width:801px; padding:0; } #menu ul { display:inline; -webkit-padding-start:0px; -webkit-margin-before:3x; -webkit-margin-after:0px; margin:0; font-size:0; } #menu ul li { text-algin:center; display:inline; font-family:Arial, sans-serif; font-size:41px; padding:0; margin:0; text-decoration:none; background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png'); } #menu a { text-decoration:none; color:Chartreuse; margin:11px 0; padding:0; min-width:100px !important; display:inline-block; } #menu a:hover { font-weight:bolder; } span { width:100%; font-size:31px; } .widthAuto { width:auto ; } </style> </head> <body> <div id="menu"> <ul> <li> <span> <a href="/1.html">Lorem </a> </span> </li> <li> <span> <a href="/2.html">Lorem </a> </span> </li> <li class="widthAuto"> <a href="/3.html"> <img src="https://www.java2s.com/style/demo/Safari.png" height="175px" alt="Domu"> </a> </li> <li> <span> <a href="/4.html">Lorem </a> </span> </li> <li> <span> <a href="/5.html">Lorem </a> </span> </li> </ul> </div> </body> </html>