У меня есть следующее navbar
с Bootstrap 3:
.affix-top{
transition: top 2s ease 2s;
-webkit-transition: top 2s ease 2s;
-moz-transition: top 2s ease 2s;
-o-transition: top 2s ease 2s;
}
.affix {
top: 0px;
width: 100%;
z-index: 999 !important;
padding-top: 90px;
text-align: center;
background-color: #fff;
padding: 12px 0 12px 0;
border-bottom: 3px double rgba(0, 0, 0, 0.1);
box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
}
.affix+.container-fluid {
padding-top: 300px;
}
.navbar {
border: 1px solid transparent;
background: #fff;
border-radius: 10px;
min-height: 0;
}
.navbar-toggle {
position: relative;
float: right;
margin-right: 15px;
padding: 10px 10px;
margin-top: 10.5px;
margin-bottom: 10.5px;
background-color: #848484;
border: 1px solid transparent;
border-radius: 5px;
}
#fh5co-header {
padding: 20px 0 0 0;
}
#fh5co-header nav ul li {
padding: 0;
margin: 0;
list-style: none;
zoom: 1;
display: inline;
text-align: center;
<head>
<meta charset="UTF-8">
<title>NavBar Collapse</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://intranet.sanmarino.com.co/sm/css/bootstrap.css'>
<link rel='stylesheet' href='https://intranet.sanmarino.com.co/sm/css/style.css'>
<!-- FontAwesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<div id="fh5co-page">
<header id="fh5co-header" role="banner">
<div class="container" style="text-align:center;">
<div class="header-inner">
<a href="index.php"><img src="https://getbootstrap.com/docs/3.3/assets/img/sass-less.png" style="width: 100%; max-width: 580px;"></a>
</div>
</div>
<nav class="navbar affix" data-spy="affix" data-offset-top="165">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="far fa-user"></i> Salir</a></li>
</ul>
</div>
</div>
</nav>
</header>
</div>
<div style="padding: 200px 0;">
Contenido Cool
</div>
<div style="padding: 200px 0;">
Contenido Cool
</div>
<div style="padding: 200px 0;">
Contenido Cool
</div>
</body>
<script src='https://intranet.sanmarino.com.co/sm/js/jquery.min.js'></script>
<script src='https://intranet.sanmarino.com.co/sm/js/bootstrap.min.js'></script>
Я хочу перейти из меню слева, чтобы отцентрировать его (или выровнять) по горизонтали.
Некоторые могут подумать, что я мало что пробовал, но поверьте мне, я пытался сделать это часами, но мои знания очень просты. Я попытался применить свойство, display:inline
а затем text-align:center
. Я также играл со свойством justify-content
и его значениями center
, space-around
и space-between
.
Я был довольно близок, применив в css:
.navbar-nav {
float: left;
margin: 0;
left: 50%;
transform: translatex(-50%);
position: relative;
Но вы теряете параметр « Выход », который является значком пользователя. Я мог бы играть, уменьшая процент, но я не думаю, что это правильный способ думать о различных разрешениях.
Используйте класс
navbar-center
со следующими свойствами:Таким образом, вам не нужно удалять или перемещать значок с упоминаемым
navbar-right
вами классом.Вы могли бы даже сделать это с
nav justify-content-center
. Вы можете увидеть больше информации о расположении меню в Bootstrap на его официальной странице .Попробуйте добавить
margin: auto
иdisplay: table
вот так: