How to place menu at the centre of the page?

Question

4.00/5 (1 vote)

See more:

Hello :).

I have a test page which has a menu on it. I would like to keep the menu at the center of this page. Here is the menu's CSS code:

.menu { 
	height: 45px;
	display: block;
}
.menu ul {
	list-style: none;
	padding: 0;
}
.menu ul li {
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	line-height: 45px;
}
.menu ul li a {
	position: relative;
	display: block;
	width: 110px;
	height: 45px;
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}
.menu ul li a span {
	position: absolute;
	left: 0;
	width: 110px;
}
.menu ul li a span.out {
	top: 0px;
}
.menu ul li a span.over,
.menu ul li a span.bg { 
	top: -45px;
}
#menu2 {
	background: #000;	
	margin: auto;
}
#menu2 ul li a {
	color: #FFF;
}
#menu2 ul li a span.over {
	background: #FFF;
	color: #000;
}

The HTML code is a simple ul/li code block. Please tell me of how can I centerize the menu? Please respond ASAP.

Posted 13-Jun-10 8:24am

Andrecito777

Updated 14-Jun-10 4:50am

Sandeep Mewara

v2

Add a Solution

Comments

Ankur^\m/ 15-Jun-10 8:54am

Andrecito777 wrote: "lol thats what I did try to try to test that thing :0 Thanks though".
So it worked?

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

**PSK_** · Answer 1 · 2010-06-14T16:24:00

Solution 1

This might help
http://tom.me.uk/html-to-css/center-vertically.html[^]

Posted 14-Jun-10 16:24pm

PSK_

Comments

Andrecito777 14-Jun-10 22:46pm

no It didn't work. Anyways, my div already has a class. Thanks though

Ankur^\m/ · Answer 2 · 2010-06-14T18:17:00

Solution 2

Try putting the menu inside a div and align the div to the center. I guess this should work.

Posted 14-Jun-10 18:17pm

Ankur^\m/

Comments

Andrecito777 15-Jun-10 8:36am

lol thats what I did try to try to test that thing :0 Thanks though

NeoTheChallenger · Answer 3 · 2010-06-14T19:31:00

Hey Tyr this Out....Hope it will be helpful!!!
This is another example--->

CSS

#centeredmenu
    { float:left;
      width:100%;
      background:#fff;
      border-bottom:4px solid #000;
      overflow:hidden;
       position:relative;
    }


 #centeredmenu ul
    {
       clear:left;
       float:left;
       list-style:none;
       margin:0;
       padding:0;
       position:relative;
       left:50%;
       text-align:center;
   }

  #centeredmenu ul li
    {
       display:block;
       float:left;
       list-style:none;
        margin:0;
        padding:0;
         position:relative;
          right:50%;
    }

   #centeredmenu ul li a
    {
       display:block;
       margin:0 0 0 1px;
       padding:3px 10px;
       background:#ddd;
       color:#000;
       text-decoration:none;
       line-height:1.3em;
    }

    #centeredmenu ul li a:hover
    {
        background:#369;
        color:#fff;
    }

    #centeredmenu ul li a.active, #centeredmenu ul li a.active:hover
    {
        color:#fff;
        background:#000;
        font-weight:bold;

    }

How to place menu at the centre of the page?

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us