Fatal编程技术网
  • html/
  • Html 如何将此菜单对齐到中心位置？

Html 如何将此菜单对齐到中心位置？

html css

Html 如何将此菜单对齐到中心位置？,html,css,Html,Css,我有这个网站： 代码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-to

我有这个网站：

代码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>

.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”放在上面，但不幸的是，它不起作用。你能告诉我为什么它不工作吗

在任何分辨率上，要使项目在中心对齐，我必须更改什么

以下是我的解决方案：

把保险单放进保险箱

        <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>
远程浮动：从两个ul

.navbar-inverse .navbar-nav {
 padding-left: 17px;
 padding-top: 75px;
 padding-bottom: 75px;
}

#menu-menu-1-container{
  text-align: center;
  position: relative;
}
结果如下：

试试这个：

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>

在导航栏标签“固定宽度”下再创建一个Div，并根据宽度类别设置导航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>
屏幕宽度设置最大屏幕尺寸为1100px/1050px笔记本电脑步骤1）打开包装和容器之间的div标签。 步骤2）将css代码添加到样式标记

HTML:

我看到菜单集中在您附加的链接中。真正的问题是什么？我添加了一张图片以更清楚地了解问题所在。我希望您在“文本对齐：中心”中添加一个连字符。它应该是
text align:center我添加了，但仍然不起作用。。。你试过你的工作吗？你需要发布一个完全工作的html/css代码，以及如何更改它？所以我求助于这篇帖子：）让我调查：）@Marius我改变了我的答案：我把两个ul放入div容器#menu-menu-1-container中，然后在容器中放入文本align:center和position:relative，而在两个ul中放入显示：inline-block@Marius没有宽度是必要的，现在不知道你做了什么改变的html。。。保持不变？@Marius，我将CSS添加到
折叠导航栏折叠bs导航栏折叠
，并将第二个列表
ul
拉到第一个div
menu-menu-1-container
中。

collapse navbar-collapse bs-navbar-collapse{
    margin: 0px auto;
    width: 1500px;
}



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



.width{ width:1100px; margin:auto; } 



<div class="warpper" >
  <div class="middle">
    <div class="container ">
         YOUR MENU BLOCK
    </div>
  </div>
</div>



.middle {
width: 75%;
position: absolute;
margin-left: -37%;
left: 50%;
}