html - 引导菜单，两个元素之间的中心元素

Question

我有以下菜单：

.navbar {
	box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
	background: #fff;
	border: 0;
	max-height: 73px
}

.navbar-center>span>a {
	display: inline-block;
	position: relative;
}

#header>.navbar>div:nth-child(2)>ul>li:nth-child(2)>a {
	padding-right: 0;
}

#header>.navbar>div:nth-child(2)>ul>li:nth-child(3)>a {
	padding-left: 0;
}

section#header {
	padding: 0;
	border-radius: 0;
	height: 80px;
}

#header>.navbar>.navbar-center {
	margin-top: -7px;
}

#header>.navbar>.navbar-center>span:nth-child(2),
#header>.navbar>.navbar-center>span:nth-child(3),
#header>.navbar>.navbar-center>span:nth-child(4),
#header>.navbar>.navbar-center>span:nth-child(5) {
	margin-left: 6%
}

.navbar-nav {
	float: none;
	margin: 0 0 0 11%
}

.navbar-brand {
	float: none;
	font-size: 20px;
}

.navbar-center {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	text-align: center;
	margin: auto;
	height: 100%;
}

@media (max-width: 1400px) {
	#header>.navbar>.navbar-center>span:nth-child(2),
	#header>.navbar>.navbar-center>span:nth-child(3),
	#header>.navbar>.navbar-center>span:nth-child(4),
	#header>.navbar>.navbar-center>span:nth-child(5) {
		margin: 0
	}
}

@media (max-width: 1000px) {
	.navbar-center {
		text-align: inherit;
		margin-left: 3%;
	}
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<section id="header">
    <nav class="navbar navbar-fixed-top" role="navigation">
        <a href="#">
            LOGO
        </a>
        <div class="navbar-center navbar-brand">
            <span><a class="navbar-brand" href="#">MENU 1</a></span>
            <span><a class="navbar-brand" href="#">MENU 2</a></span>
            <span><a class="navbar-brand" href="#">MENU 3</a></span>
            <span><a class="navbar-brand" href="#">MENU 4</a></span>
            <a href="#">
                CENTER ME
            </a>
        </div>
        <div>
            <ul class="nav navbar-nav navbar-right">
                <li style="background: #244b5a;">
                    <a href="/logout.php">
                        Logout
                    </a>
                </li>
            </ul>
        </div>
    </nav>
</section>

我想将CENTER ME左右元素之间的块居中。

我尝试使用margin: 0 auto;

标签： htmlcsstwitter-bootstrap-3

Answer 1

正如我在评论中所说，主要目标是这样做：
您需要在菜单 4 之后放置一个元素，该元素将占用父级的所有剩余宽度。然后，在该元素中，将另一个显示为具有左右边距自动的块。

我还说过，bootstrap 3 带有帮助您执行此操作的辅助类。您可以通过阅读那里的文档找到它们：https ://getbootstrap.com/docs/3.3/css/#helper-classes-floats

注意代码的那部分：

        <div class="navbar-center navbar-brand">
            <span><a class="navbar-brand" href="#">MENU 1</a></span>
            <span><a class="navbar-brand" href="#">MENU 2</a></span>
            <span><a class="navbar-brand" href="#">MENU 3</a></span>
            <span><a class="navbar-brand" href="#">MENU 4</a></span>
            <div class=container">
                <div class="center-block">center me</div>
            </div>
        </div>

.container创建将填充剩余空间的元素。
.center-block将应用以下 CSS，并且它们都使用 bootstrap 3 开箱即用。

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

注意以下代码段包含其他阻止其按预期工作的 css 错误。您需要展开代码片段才能真正看到居中元素的行为。

.navbar {
	box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
	background: #fff;
	border: 0;
	max-height: 73px
}

.navbar-center>span>a {
	display: inline-block;
	position: relative;
}

#header>.navbar>div:nth-child(2)>ul>li:nth-child(2)>a {
	padding-right: 0;
}

#header>.navbar>div:nth-child(2)>ul>li:nth-child(3)>a {
	padding-left: 0;
}

section#header {
	padding: 0;
	border-radius: 0;
	height: 80px;
}

#header>.navbar>.navbar-center {
	margin-top: -7px;
}

#header>.navbar>.navbar-center>span:nth-child(2),
#header>.navbar>.navbar-center>span:nth-child(3),
#header>.navbar>.navbar-center>span:nth-child(4),
#header>.navbar>.navbar-center>span:nth-child(5) {
	margin-left: 6%
}

.navbar-nav {
	float: none;
	margin: 0 0 0 11%
}

.navbar-brand {
	float: none;
	font-size: 20px;
}

.navbar-center {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	text-align: center;
	margin: auto;
	height: 100%;
}

@media (max-width: 1400px) {
	#header>.navbar>.navbar-center>span:nth-child(2),
	#header>.navbar>.navbar-center>span:nth-child(3),
	#header>.navbar>.navbar-center>span:nth-child(4),
	#header>.navbar>.navbar-center>span:nth-child(5) {
		margin: 0
	}
}

@media (max-width: 1000px) {
	.navbar-center {
		text-align: inherit;
		margin-left: 3%;
	}
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<section id="header">
    <nav class="navbar navbar-fixed-top" role="navigation">
        <a href="#">
            LOGO
        </a>
        <div class="navbar-center navbar-brand">
            <span><a class="navbar-brand" href="#">MENU 1</a></span>
            <span><a class="navbar-brand" href="#">MENU 2</a></span>
            <span><a class="navbar-brand" href="#">MENU 3</a></span>
            <span><a class="navbar-brand" href="#">MENU 4</a></span>
            <div class=container-fluid">
                <div class="center-block">center me</div>
            </div>
        </div>
        <div>
            <ul class="nav navbar-nav navbar-right">
                <li style="background: #244b5a;">
                    <a href="/logout.php">
                        Logout
                    </a>
                </li>
            </ul>
        </div>
    </nav>
</section>