make menu center align – horizontal align center menu or div


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

 

<div id=”menu_center”>
<ul>
<li><a href=”#”>Tab one</a></li>
<li><a href=”#” class=”active”>Tab two</a></li>
<li><a href=”#”>Tab three</a></li>
<li><a href=”#”>Tab four</a></li>
</ul>
</div>
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;
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s