Jump to content



Photo

CSS help - can't center


  • Please log in to reply
10 replies to this topic

#1 William Mahoney

William Mahoney

    Neowinian

  • Joined: 16-April 13

Posted 12 March 2014 - 18:28

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; }



#2 LaP

LaP

    Forget about it

  • Tech Issues Solved: 4
  • Joined: 10-July 06
  • Location: Quebec City, Canada
  • OS: Windows 8.1 Pro Update 1

Posted 12 March 2014 - 18:30

put

 

margin:0 auto

 

to the container of the menu



#3 winlonghorn

winlonghorn

    Neowinian

  • Joined: 17-March 05
  • Location: Erie, PA

Posted 12 March 2014 - 18:47

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. 



#4 Mandosis

Mandosis

    Je'daii Ranger

  • Tech Issues Solved: 1
  • Joined: 26-June 13
  • Location: Minnesota, USA
  • OS: Windows 8.1 Pro 64-bit
  • Phone: Google Nexus 4

Posted 12 March 2014 - 19:00

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



#5 OP William Mahoney

William Mahoney

    Neowinian

  • Joined: 16-April 13

Posted 13 March 2014 - 07:12

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



#6 Blaze_Zewi

Blaze_Zewi

    Neowinian

  • Tech Issues Solved: 1
  • Joined: 07-October 10

Posted 13 March 2014 - 08:01

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; }


#7 virtorio

virtorio

    Neowinian Senior

  • Tech Issues Solved: 14
  • Joined: 28-April 03
  • Location: New Zealand
  • OS: OSX 10.10, Windows 8.1
  • Phone: LG G3

Posted 13 March 2014 - 08:09

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>


#8 Blaze_Zewi

Blaze_Zewi

    Neowinian

  • Tech Issues Solved: 1
  • Joined: 07-October 10

Posted 13 March 2014 - 09:16

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; }


#9 mastercoms

mastercoms

    Expert Microsoft Fanboy & C# Coder

  • Tech Issues Solved: 3
  • Joined: 21-May 13
  • Location: Marietta, Georgia
  • OS: W10 + Fedora 21
  • Phone: Lumia 928 WP8.1U1 Black

Posted 13 March 2014 - 10:03

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.



#10 Kalint

Kalint

    Neowinian Senior

  • Tech Issues Solved: 2
  • Joined: 16-January 07

Posted 13 March 2014 - 15:59

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.



#11 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 26
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 13 March 2014 - 18:17

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

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