我有这个网站:
代码HTML:
<div class="content-menu">
<div class="navbar navbar-inverse bs-docs-nav" role="banner">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".bs-navbar-collapse" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
<div class="logo-mobile">
<a href="#"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/logo-mobile.png"></a>
<ul class="lang-top navbar-right">
<li>
<a href="#">En</a>
</li>
<li>
<a href="#">fr</a>
</li>
</ul>
</div>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<div class="menu-menu-1-container">
<ul class="nav navbar-nav" id="menu-menu-1">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22" id="menu-item-22">
<a href="http://dg-design.ch/bagel/?page_id=4" title="Home">Home</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27" id="menu-item-27">
<a href="http://dg-design.ch/bagel/?page_id=10" title="News">News</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65" id="menu-item-65">
<a href="http://dg-design.ch/bagel/?page_id=63" title="Events">Events</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-71" id="menu-item-71">
<a href="http://www.smood.ch/en/156_bagel-house-caf%C3%A9" target="_blank" title="Delivery">Delivery</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23" id="menu-item-23">
<a href="http://dg-design.ch/bagel/?page_id=6" title="About us">About us</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25" id="menu-item-25">
<a href="http://dg-design.ch/bagel/?page_id=12" title="Contact">Contact</a>
</li>
</ul>
</div>
<ul class="lang-top navbar-right">
<li><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/logo-menu.png"></li>
<li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li>
<li class="icon">
<a href="#">MENU</a>
</li>
<li class="icon">
<a href="#">En</a>
</li>
<li class="icon">
<a href="#">fr</a>
</li>
<li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li>
<li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li>
<li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li>
</ul>
</nav>
</div>
</div>
CODE CSS:
.wrapper .content .content-menu {
/* width: 91%; */
/*background: #5B626A;*/
position: absolute;
z-index:9999;
/* left: 4%; */
margin: 0 auto;
left: 0;
top: 0;
right: 0;
}
我尝试将上面的代码"text align: center"
放在上面,但遗憾的是无效。你能告诉我为什么它不起作用?
在任何分辨率下,要在中心对齐的项目必须更改哪些内容?
答案 0 :(得分:0)
这是我的解决方案:
将ul放入div
<div class="menu-menu-1-container">
<ul class="nav navbar-nav" id="menu-menu-1">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22" id="menu-item-22">
<a href="http://dg-design.ch/bagel/?page_id=4" title="Home">Home</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27" id="menu-item-27">
<a href="http://dg-design.ch/bagel/?page_id=10" title="News">News</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65" id="menu-item-65">
<a href="http://dg-design.ch/bagel/?page_id=63" title="Events">Events</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-71" id="menu-item-71">
<a href="http://www.smood.ch/en/156_bagel-house-caf%C3%A9" target="_blank" title="Delivery">Delivery</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23" id="menu-item-23">
<a href="http://dg-design.ch/bagel/?page_id=6" title="About us">About us</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25" id="menu-item-25">
<a href="http://dg-design.ch/bagel/?page_id=12" title="Contact">Contact</a>
</li>
</ul>
<ul class="lang-top navbar-right">
<li><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/logo-menu.png"></li>
<li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li>
<li class="icon">
<a href="#">MENU</a>
</li>
<li class="icon">
<a href="#">En</a>
</li>
<li class="icon">
<a href="#">fr</a>
</li>
<li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li>
<li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li>
<li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li>
</ul>
</div>
在css中:
#menu-menu-1, .lang-top{
display: inline-block;
}
remote float:从ul
左侧.navbar-inverse .navbar-nav {
padding-left: 17px;
padding-top: 75px;
padding-bottom: 75px;
}
#menu-menu-1-container{
text-align: center;
position: relative;
}
结果如下:
答案 1 :(得分:0)
试试这个:
<强> HTML 强>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<div class="menu-menu-1-container">
<ul class="nav navbar-nav" id="menu-menu-1"></ul>
<ul class="lang-top navbar-right"></ul>
</div>
</nav>
<强> CSS 强>
collapse navbar-collapse bs-navbar-collapse{
margin: 0px auto;
width: 1500px;
}
答案 2 :(得分:0)
在导航栏标签下创建一个更多Div固定宽度&amp;根据宽度类ex: -
设置nav css<div class="content-menu">
<div class="navbar navbar-inverse bs-docs-nav" role="banner">
<div class="width">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".bs-navbar-collapse" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
<div class="logo-mobile">
<a href="#"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/logo-mobile.png"></a>
<ul class="lang-top navbar-right">
<li>
<a href="#">En</a>
</li>
<li>
<a href="#">fr</a>
</li>
</ul>
</div>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<div class="menu-menu-1-container">
<ul class="nav navbar-nav" id="menu-menu-1">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22" id="menu-item-22">
<a href="http://dg-design.ch/bagel/?page_id=4" title="Home">Home</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27" id="menu-item-27">
<a href="http://dg-design.ch/bagel/?page_id=10" title="News">News</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65" id="menu-item-65">
<a href="http://dg-design.ch/bagel/?page_id=63" title="Events">Events</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-71" id="menu-item-71">
<a href="http://www.smood.ch/en/156_bagel-house-caf%C3%A9" target="_blank" title="Delivery">Delivery</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23" id="menu-item-23">
<a href="http://dg-design.ch/bagel/?page_id=6" title="About us">About us</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25" id="menu-item-25">
<a href="http://dg-design.ch/bagel/?page_id=12" title="Contact">Contact</a>
</li>
</ul>
</div>
<ul class="lang-top navbar-right">
<li><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/logo-menu.png"></li>
<li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li>
<li class="icon">
<a href="#">MENU</a>
</li>
<li class="icon">
<a href="#">En</a>
</li>
<li class="icon">
<a href="#">fr</a>
</li>
<li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li>
<li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li>
<li class="icon"><img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png"></li>
</ul>
</nav>
</div>
</div>
的CSS
.width{ width:1100px; margin:auto; }
屏幕尺寸设置最大屏幕尺寸为1100px / 1050px笔记本电脑 - 电脑
答案 3 :(得分:0)
步骤1)在包装器和容器之间打开div标签。 步骤2)将css代码添加到样式标记。
HTML:
<div class="warpper" >
<div class="middle">
<div class="container ">
YOUR MENU BLOCK
</div>
</div>
</div>
CSS:
.middle {
width: 75%;
position: absolute;
margin-left: -37%;
left: 50%;
}