我目前正在为页面设计导航栏。我希望 Logo 位于按钮和列表之间的中间。
目前看起来像这样:
我的 html 和 css:
/**
GENERAL
*/
body {
font-family: 'Roboto', sans-serif;
}
/**
NAVIGATION BAR
*/
.navbar {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24);
}
/* center */
.navbar .center {
position: relative;
/* width: 100%; */
text-align: center;
float: none;
/* height: 100px; */
/* margin-top: auto; */
}
/*
margin-top: 1.33em;
}*/
.navbar .center a, img {
color: black;
text-decoration: none;
font-family: 'Abril Fatface', cursive;
transition: 0.3s ease;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
}
.navbar .center a:hover, img:hover {
opacity: .5;
}
/* left */
.navbar ul {
list-style: none;
line-height: 1.85714286em;
position: relative;
}
.navbar .left a {
float: left;
color: black;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar li {
transition: 0.3s ease;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
}
.navbar li:not(:hover):not(.active) {
opacity: .5;
}
/* right */
.navbar .right a {
margin-left: 16px;
float: right;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blog Layout</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Fonts -->
<!-- Main Font-->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Logo Font-->
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<header class="navbar hidden-sm-down">
<div class="container">
<div class="center">
<h4 href="#">
<a href="#">Test Blog.</a>
</h4>
</div>
<div class="left">
<ul>
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<div class="right">
<a class="btn btn-primary" href="#" role="button">Register</a>
<a class="btn btn-secondary" href="#" role="button">Login</a>
</div>
</div>
</header>
</body>
</html>在我使用 position: absolute; 之前对于我的 .navbar .center但这破坏了 Bootstrap 按钮并弄乱了行顶部和底部之间的间距。
我已经试过了 <div class="row">有了它，但这完全破坏了我的导航栏。
请知道我是 Css 和 Bootstrap 的初学者。
感谢您的帮助，
汤姆
最佳答案
在父级上为 3 个标题项使用 flex，将每个标题项设置为 flex-grow: 1; 和 flex-basis: 0(或 flex: 1 0 0)让它们平均占据整个标题的 1/3，给 .left 一个 order: -1 将其放在行的开头，然后在 flex 父级上使用 align-items:center 使元素垂直居中。如果您希望底部对齐，也可以使用 bottom 或 baseline。您可以在此处阅读有关 flex 选项的更多信息 - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
/**
GENERAL
*/
body {
font-family: 'Roboto', sans-serif;
}
/**
NAVIGATION BAR
*/
.navbar {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
/* center */
.navbar .center {
position: relative;
/* width: 100%; */
text-align: center;
float: none;
/* height: 100px; */
/* margin-top: auto; */
}
/*
margin-top: 1.33em;
}*/
.navbar .center a,
img {
color: black;
text-decoration: none;
font-family: 'Abril Fatface', cursive;
transition: 0.3s ease;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
}
.navbar .center a:hover,
img:hover {
opacity: .5;
}
/* left */
.navbar ul {
list-style: none;
line-height: 1.85714286em;
position: relative;
}
.navbar .left a {
float: left;
color: black;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar li {
transition: 0.3s ease;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
}
.navbar li:not(:hover):not(.active) {
opacity: .5;
}
/* right */
.navbar .right a {
margin-left: 16px;
float: right;
}
.navbar > .container {
display: flex;
align-items: center;
}
.navbar > .container > div {
flex: 1 0 0;
}
.navbar .left {
order: -1;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blog Layout</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Fonts -->
<!-- Main Font-->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Logo Font-->
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<header class="navbar hidden-sm-down">
<div class="container">
<div class="center">
<h4 href="#">
<a href="#">Test Blog.</a>
</h4>
</div>
<div class="left">
<ul>
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<div class="right">
<a class="btn btn-primary" href="#" role="button">Register</a>
<a class="btn btn-secondary" href="#" role="button">Login</a>
</div>
</div>
</header>
</body>
</html>关于html - 带有居中 Logo 的导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43441382/