Question

我有这个页面：

我建立了这个菜单CSS代码如下......

CODE CSS：

.wrapper .content .content-menu {
  width: 91%;
  /*background: #5B626A;*/
  position:fixed;
  z-index:9999;
  left: 4%;
  margin: 0 auto;
}

代码HTML：

<div class="content-menu">
                    <div class="navbar navbar-inverse bs-docs-nav" role="banner">
                        <div class="navbar-header">
                           //Some CODE HTML
                        </div>
                   </div>
</div>

网站上显示的最佳HTML代码...您能告诉我如何让这个菜单始终处于中心位置吗？我做了一个丝网印刷，以更清楚地了解他们想要什么。

Answer 1

使用left: 50%; transform: translateX(-50%)将其与固定定位对齐。使用边距对中元素：0 auto用于页面流中的元素，而不是固定定位，绝对定位或浮动元素

Answer 2

将左右菜单设为50％，放置徽标 - 左边宽度为左边，边距为左半边缘+边距为右边

    ul.lang-top.navbar-right {
    width: 50%;
    margin: 0;
}

ul.lang-top.navbar-right li:first-child > img {
    width: 200px;
    height: 130px;
    margin-left: -67px;
}

.menu-menu-1-container {
    display: inline-block;
    width: 50%;
}

ul#menu-menu-1 {
    float: right;
    margin-right:90px;
}

Answer 3

这是你要实现的吗？

我设法通过使用此代码来实现：

.navbar-inverse .navbar-collapse {
  text-align: center;
}
.menu-menu-1-container, .lang-top {
    display: inline-block;
}
.navbar-nav {
    margin: 0;
    float: none;
    text-align: center;
}
.navbar-nav > li {
    float: none;
    display: inline-block;
}
ul.lang-top.navbar-right {
    float: none;
    text-align: center;
}
.lang-top li {
    float: none;
    display: inline-block;
    margin-left: 10px;
}

如果您仍遇到任何问题，请告诉我

如何对齐此菜单的中心？CSS

3 个答案: