Jump to content
  • 0
Sign in to follow this  
Followers 0

Question

Posted

I want my menu to be centered on the page. This is the Css code but the menu is aligned to the left. can someone tell me how to fix this?
 
#menu_container { padding-bottom: 25px; }
 
#menu_container ul { list-style-type: none; }
 
#menu_container ul li { float: left; }
 
#menu_container ul li a { color: #fff; text-decoration: none; background-color: #000; padding: 6px 6px; margin-right: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; display: block; }
 
#menu_container ul li a:hover { background-color: #858585; }
 
#menu_container ul li.current-menu-item a, #menu_container ul li.current_page_item a { background-color: #858585; }
 
#menu_container input[type=text] { width: 172px; height: 25px; background-color: #000; color: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; float: right; border: none; padding: 0 5px; }

Share this post


Link to post
Share on other sites

10 answers to this question

  • 0

Posted

put

 

margin:0 auto

 

to the container of the menu

Share this post


Link to post
Share on other sites
  • 0

Posted

I agree with LaP. That seems like the most flexible solution. It will auto re size the left and right margins as you re size the window. 

Share this post


Link to post
Share on other sites
  • 0

Posted

Like what LaP said, just set the left and right margin to auto and it should center.

Share this post


Link to post
Share on other sites
  • 0

Posted

Tried your advice. Thank you! but it is still not centering the menu

Share this post


Link to post
Share on other sites
  • 0

Posted

Your #menu_container is a block element. You have to define a width.
 
Give your #menu_container tag a width, use ether % or px. Than add margin:0 auto;  :)
 
Something like this
#menu_container { width: 50%; margin: 0 auto; padding-bottom: 25px; }

Share this post


Link to post
Share on other sites
  • 0

Posted

I'm not a CSS expert, but this should do what you want. 

<!doctype html>
<html>
<head>
<style>
#menu_container { 
padding-bottom: 25px; 
text-align: center;
}
 
#menu_container ul { 
position: relative;
list-style-type: none; 
}
 
#menu_container ul li { 
display: inline;
}
 
#menu_container ul li a { 
color: #fff; 
text-decoration: none; 
background-color: #000; 
padding: 6px 6px; 
margin-right: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-khtml-border-radius: 5px; 
border-radius: 5px; 
display: inline-block;
}
 
#menu_container ul li a:hover { 
background-color: #858585; 
}
 
#menu_container ul li.current-menu-item a, 
#menu_container ul li.current_page_item a { 
background-color: #858585; 
}
 
#menu_container input[type=text] { 
width: 172px; 
height: 25px; 
background-color: #000; 
color: #fff; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-khtml-border-radius: 5px; 
border-radius: 5px; 
float: right; 
border: none; 
padding: 0 5px; 
}
</style>
</head>
<body>
 
<div id="menu_container">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li> 
</li>
<input type="text"></a>
</div>
 
<h1>Hello World!</h1>
</body>
</html>

Share this post


Link to post
Share on other sites
  • 0

Posted

This method works too

#menu_container { padding-bottom: 25px; }
 
#menu_container ul { text-align: center; font-size: 0pt; list-style-type: none; }
 
#menu_container ul li { display: inline-block; font-size: 12pt;}
 
#menu_container ul li a { color: #fff; text-decoration: none; background-color: #000; padding: 6px 6px; margin-right: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; display: block; }
 
#menu_container ul li a:hover { background-color: #858585; }
 
#menu_container ul li.current-menu-item a, #menu_container ul li.current_page_item a { background-color: #858585; }
 
#menu_container input[type=text] { width: 172px; height: 25px; background-color: #000; color: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; float: right; border: none; padding: 0 5px; }

Share this post


Link to post
Share on other sites
  • 0

Posted

I know this is not supposed to be used, but when I'm lazy I do <div align="center">

 

It's better to do <div style="text-align:center"> but sometimes that doesn't work for me.

Share this post


Link to post
Share on other sites
  • 0

Posted

This and vertical align are what makes me go HUH? with css.  I suppose you could do the ghetto trick and just use a table and center it.

Share this post


Link to post
Share on other sites
  • 0

Posted

You can also use multiple elements to center dynamic width navigation bars:

jsfiddle: http://jsfiddle.net/24vf7/

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.