Nikolai X. Shadeauxs Posted March 12, 2014 Share Posted March 12, 2014 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; } Link to comment Share on other sites More sharing options...
0 LaP Posted March 12, 2014 Share Posted March 12, 2014 put margin:0 auto to the container of the menu Link to comment Share on other sites More sharing options...
0 winlonghorn Posted March 12, 2014 Share Posted March 12, 2014 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. Link to comment Share on other sites More sharing options...
0 Mandosis Posted March 12, 2014 Share Posted March 12, 2014 Like what LaP said, just set the left and right margin to auto and it should center. Link to comment Share on other sites More sharing options...
0 Nikolai X. Shadeauxs Posted March 13, 2014 Author Share Posted March 13, 2014 Tried your advice. Thank you! but it is still not centering the menu Link to comment Share on other sites More sharing options...
0 Blaze_Zewi Posted March 13, 2014 Share Posted March 13, 2014 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; } Link to comment Share on other sites More sharing options...
0 +virtorio MVC Posted March 13, 2014 MVC Share Posted March 13, 2014 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> Link to comment Share on other sites More sharing options...
0 Blaze_Zewi Posted March 13, 2014 Share Posted March 13, 2014 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; } Link to comment Share on other sites More sharing options...
0 gohpep Posted March 13, 2014 Share Posted March 13, 2014 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. Link to comment Share on other sites More sharing options...
0 Kalint Posted March 13, 2014 Share Posted March 13, 2014 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. Link to comment Share on other sites More sharing options...
0 Seahorsepip Veteran Posted March 13, 2014 Veteran Share Posted March 13, 2014 You can also use multiple elements to center dynamic width navigation bars: jsfiddle: http://jsfiddle.net/24vf7/ Link to comment Share on other sites More sharing options...
Question
Nikolai X. Shadeauxs
Link to comment
Share on other sites
10 answers to this question
Recommended Posts