Jeevachaithanyan Sivanandan

make menu center align - horizontal align center menu or div

In technology · 1 min read

well, its just basic and not a big deal  to many of you out there. But some times this will come a bit handy just as I got it. I had to spend much time around a menu center align, which I was customizing a download theme. After so many trial and error, I just figured that its better to re-write the whole menu css. Thus I solved my problem.

 

well here my tip

 

Centered Menu CSS Below is the CSS used to center the tabs across the page. See below for an explanation of how this works. #menu_center { float:left; width:100%; background:#fff; border-bottom:4px solid #000; overflow:hidden; position:relative; } #menu_center ul { clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; } #menu_center ul li { display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; } #menu_center ul li a { display:block; margin:0 0 0 1px; padding:3px 10px; background:#ddd; color:#000; text-decoration:none; line-height:1.3em; } #menu_center ul li a:hover { background:#369; color:#fff; } #menu_center ul li a.active, #menu_center ul li a.active:hover { color:#fff; background:#000; font-weight:bold; }