居中的CSS下拉菜单 [英] Centering a css dropdown menu
本文介绍了居中的CSS下拉菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想集中我的CSS下拉菜单，但我不能看到得到它的工作！我试着添加文本对齐：中心和保证金左：自动;保证金右：汽车，但所有被集中在下拉锂项目。这是怎么做的？
下面是CSS：
.bg {背景色：＃008503;}
。菜单{填充：0 0 0 32PX;保证金：0;列表样式：无;高度：30PX;背景颜色：＃1e52b8;位置：亲属;字体家庭：黑体，宋体，无衬线; }
。菜单li.top {显示：块;浮动：左;位置：相对;}
。菜单里a.top_link {显示：块;浮动：左;高度：30PX;的line-height：33px;颜色：#FFF;文字修饰：无;字体大小：15px的;字体重量：大胆的;填充：0 0 0 12px的;光标：指针;}
。菜单里a.top_link跨度{浮动：左;字体重量：大胆的;显示：块;填充：0 24PX 0 12px的;高度：30PX;}
。菜单里a.top_link span.down {浮动：左;显示：块;填充：0 24PX 0 12px的;高度：40PX;背景：网址（图片/ down.gif）不重复右上角;}
。菜单里a.top_link：悬停{颜色：＃000;背景颜色：＃008503;}
。菜单里a.top_link：悬停跨度{背景色：＃008503;}
。菜单里a.top_link：悬停span.down {背景色：＃FF0000;}
。菜单李：悬停＆GT; a.top_link {颜色：#FFF;背景颜色：＃008503;}
。菜单李：悬停＆GT; a.top_link跨度{背景色：＃008503;}
。菜单李：悬停＆GT; a.top_link span.down {背景色：＃FF0000;}
。菜单表{边界崩溃：崩溃;宽度：0;身高：0;位置：绝对的;顶部：0;左：0;}
。菜单答：悬停{能见度：可见;}
。菜单李：悬停{位置：亲属;的z-index：200;}
。菜单UL，
。菜单：悬停UL UL，
。菜单：悬停UL：悬停UL UL，
。菜单：悬停UL：悬停UL：悬停UL UL，
。菜单：悬停UL：悬停UL：悬停UL：悬停UL UL {位置：绝对的;左：-9999px;顶部：-9999px;宽度：0;身高：0;保证金：0;填充：0;列表样式：无;}
。菜单：悬停ul.sub {左：0;顶：30像素;右：2px的;背景：#FFF;填充：0的3px;边界：1px的固体＃008503;空白：NOWRAP;宽度：200像素;高度：自动;}
。菜单：悬停ul.sub李{显示：块;高度：20像素;位置：亲属;浮动：左;宽度：250像素;}
。菜单：悬停ul.sub李一{字体重量：正常;显示：块;字体大小：11像素;高度：20像素;宽度：192px;的line-height：20px的;文本缩进：5像素;颜色：＃000;文字修饰：无;边框：3PX固体#FFF;边框宽度：0 0 0的3px;}
。菜单：悬停ul.sub李a.fly {背景：#FFF网址（图片/ arrow.gif）80px 7px的不重复;}
。菜单：悬停ul.sub李一：悬停{背景：＃1e52b8;颜色：#FFF;}
。菜单：悬停ul.sub李a.fly:hover {背景：＃999999网址（图片/ arrow_over.gif）80px 7px的不重复;颜色：#FFF;}
。菜单：悬停UL李：悬停＆GT; a.fly {背景：＃999999网址（图片/ arrow_over.gif）80px 7px的不重复;颜色：#FFF;}
。菜单：悬停UL：悬停UL，
。菜单：悬停UL：悬停UL：悬停UL，
。菜单：悬停UL：悬停UL：悬停UL：悬停UL，
。菜单：悬停UL：悬停UL：悬停UL：悬停UL：悬停UL
{左：90px;顶部：-4px;背景：#FFF;填充：0的3px;边界：1px的固体999999;空白：NOWRAP;宽度：93px;的z-index：200;高度：自动;}
和下面的HTML代码：
＆LT; DIV的风格=宽度：980px＆GT; ＆LT;！ - 集装箱 - ＆GT;
＆LT; UL类=菜单＆GT;
＆LT;李类=顶＆GT;＆LT; A HREF =＃级=top_link＆GT;＆LT;跨度＆gt;将＆LT; / SPAN＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李类=顶＆GT;＆LT; A HREF =＃级=top_link＆GT;＆LT;跨度＆gt;关于美国和LT; / SPAN＆GT;＆LT; / A＆GT;
＆LT; UL类=亚健康＆GT;
＆LT;李＆GT;＆LT; A HREF =＃＆GT;菜单示例这是一些较长的文字＆lt; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =＃＆GT;样品菜单＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =＃＆GT;样品菜单＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =＃＆GT;样品菜单＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =＃＆GT;样品菜单＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; /李＆GT;
＆LT;李类=顶＆GT;＆LT; A HREF =＃级=top_link＆GT;＆LT;跨度＆gt;将岛和LT; / SPAN＆GT;＆LT; / A＆GT;
＆LT; UL类=亚健康＆GT;
＆LT;李＆GT;＆LT; A HREF =＃＆GT;菜单示例这是一些较长的文字＆lt; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =＃＆GT;样品菜单＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =＃＆GT;样品菜单＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =＃＆GT;样品菜单＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; /李＆GT;
＆LT;李类=顶＆GT;＆LT; A HREF =＃级=top_link＆GT;＆LT;跨度＆GT;酒店＆LT; / SPAN＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李类=顶＆GT;＆LT; A HREF =＃级=top_link＆GT;＆LT;跨度＆GT;旅游＆LT; / SPAN＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李类=顶＆GT;＆LT; A HREF =＃级=top_link＆GT;＆LT;跨度＆GT;保留＆LT; / SPAN＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李类=顶＆GT;＆LT; A HREF =＃级=top_link＆GT;＆LT;跨度＆GT;联系我们＆LT; / SPAN＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
解决方案
由于您使用的浮动，只有这样，才能居中是一个宽度应用到包含的元素，并使用保证金左：自动;保证金右：汽车。有没有办法做到这一点会保持灵活的宽度。
这是另一种自由浮动将显示：inline-block的;这些可以使用文本对齐居中：中心，但你必须返工的CSS
I'm trying to center my css dropdown menu, but I can't seen to get it to work! I've tried adding text-align: center and margin-left: auto; margin-right: auto, but all that gets centered are the dropdown li-items. How is this done?
Here's the css:
.bg {background-color: #008503;}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:30px; background-color: #1e52b8; position:relative; font-family: Helvetica, Verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:30px; line-height:33px; color:#FFF; text-decoration:none; font-size:15px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:30px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background-color: #008503;}
.menu li a.top_link:hover span {background-color: #008503;}
.menu li a.top_link:hover span.down {background-color: #FF0000;}
.menu li:hover > a.top_link {color:#FFF; background-color: #008503;}
.menu li:hover > a.top_link span {background-color: #008503;}
.menu li:hover > a.top_link span.down {background-color: #FF0000;}
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu :hover ul.sub {left:0; top:30px; right:2px; background: #fff; padding:3px 0; border:1px solid #008503; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(images/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#1e52b8; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;}
And here's the html:
<div style="width: 980px"> <!-- container -->
<ul class="menu">
<li class="top"><a href="#" class="top_link"><span>Introduction</span></a></li>
<li class="top"><a href="#" class="top_link"><span>About us</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>The island</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Hotels</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Tours</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Reservation</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Contact us</span></a></li>
</ul>
</div>
解决方案
Since you are using float, the only way to center it is to apply a width to the containing element and use margin-left: auto; margin-right: auto. There is no way to do this will retaining the flexible width.
An alternative to float would be display:inline-block; These can be centered using text-align:center, but you'll have to rework the css.
这篇关于居中的CSS下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
