如何将菜单置于页面中心? [英] How to place menu at the centre of the page?

问题描述

你好:).

我有一个测试页，上面有一个菜单.我想将菜单保留在此页面的中心.这是菜单的CSS代码:

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

HTML代码是一个简单的ul/li代码块.请告诉我如何使菜单居中?请尽快回复.

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

推荐答案

这可能有帮助
http://tom.me.uk/html-to-css/center-vertically.html [ ^ ]

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

尝试将菜单放在div内，然后将div对准中心.我想这应该可行.

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

嘿，请把这个出来....希望对您有所帮助！ 这是另一个示例--->

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

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

    }

这篇关于如何将菜单置于页面中心?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！