Html 引导将导航栏对准中心
我把品牌放在中央导航栏上,我想导航到左边,导航到右边。所有这些工作都很好,但我有一个问题,那就是如何像下面的屏幕截图一样对齐左右导航中心 这是我的代码:Html 引导将导航栏对准中心,html,css,twitter-bootstrap,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,我把品牌放在中央导航栏上,我想导航到左边,导航到右边。所有这些工作都很好,但我有一个问题,那就是如何像下面的屏幕截图一样对齐左右导航中心 这是我的代码: .navbar{ 位置:相对位置; 高度:150像素; } .品牌{ 位置:固定; 最高:23%; 左:50%; /*带上你自己的前缀*/ 转换:翻译(-50%,-50%); 左边距:-50px!重要;/*50%的徽标宽度*/ 显示:块; } 您好,您可以尝试这样做来实现您想要的 首先删除上的类.mr a
.navbar{
位置:相对位置;
高度:150像素;
}
.品牌{
位置:固定;
最高:23%;
左:50%;
/*带上你自己的前缀*/
转换:翻译(-50%,-50%);
左边距:-50px!重要;/*50%的徽标宽度*/
显示:块;
}
-
-
-
-
-
-
-
您好,您可以尝试这样做来实现您想要的
首先删除
上的类.mr auto
,然后添加
一个类.custom css
到
,因为.navbar collapse
已经设置为display:flex
,我们现在只需设置对正内容:空格代码>到。自定义css
请参阅下面的代码
.navbar{
位置:相对位置;
高度:150像素;
}
.品牌{
位置:固定;
最高:23%;
左:50%;
/*带上你自己的前缀*/
转换:翻译(-50%,-50%);
左边距:-50px!重要;/*50%的徽标宽度*/
显示:块;
}
.自定义css{
证明内容:周围的空间;
}
-
-
-
-
-
-
-
您有2个ul类,将所有元素组合在一个类中,然后使用Div class容器,然后使用justify content=center将所有元素置于中心。请参阅下面的代码
.container {
display: flex;
align-content: center;
justify-content: center;
height:150px;
}
.brand {
position: fixed;
top: 23%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="container">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Прославе</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Галерија</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Локација</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Контакт</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">3</a>
</li>
</ul>
</div>
</div>
</nav>
Run code snippetReturn to post
</body>
</html>
.container{
显示器:flex;
对齐内容:居中对齐;
证明内容:中心;
高度:150像素;
}
.品牌{
位置:固定;
最高:23%;
左:50%;
/*带上你自己的前缀*/
转换:翻译(-50%,-50%);
左边距:-50px!重要;/*50%的徽标宽度*/
显示:块;
}
-
-
-
-
-
-
-
运行代码段返回到post
在徽标的左右两侧制作两个可折叠的导航会更好(而且响应更快)
<nav class="navbar navbar-expand-lg navbar-dark bg-dark position-relative">
<div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Почетна</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">О нама</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Мени</a>
</li>
</ul>
</div>
<div class="mx-auto order-0 mt-lg-5 mt-0 order-md-1 position-relative">
<a class="mx-auto" href="#">
<img src="//placehold.it/250" class="rounded-circle">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Прославе</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Галерија</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Локација</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Контакт</a>
</li>
</ul>
</div>
@media (min-width: 992px) {
.navbar {
height:150px;
}
}