如何在导航栏 bulma 中将带有徽标的文本居中
How to center text with logo in the middle of it in navbar bulma
我试图将导航栏内的文本居中，而徽标位于导航栏项之间，但是，我只能将徽标作为品牌形象居中。
这是我的代码：
<a role="button" class="navbar-burger" aria-label="menu" data-target="navMenu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
<nav class="navbar is-white">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src='img/logo.png' style="width: 100px;">
</a>
<div class="navbar-menu" id="navMenu">
<div class="navbar-start">
<a href="#" class="navbar-item nav-text">Paslaugos</a>
<a href="#" class="navbar-item nav-text">Kainos</a>
<a href="#" class="navbar-item nav-text">DUK</a>
<a href="#" class="navbar-item nav-text">Apie Mus</a>
</div>
</div>
</nav>
css
.navbar .navbar-brand {
text-align: center;
display: block;
width: 100%;
}
.navbar .navbar-brand > .navbar-item,
.navbar .navbar-brand .navbar-link {
display: inline-block;
}
任何帮助将不胜感激我已经在这上面花了太多时间。
尝试使用 flex 属性。对于容器 div 你可以给
<div class="flexcontainer">
<ul>
<li>home</li>
<li>About</li>
<li><img src="http://www.monodies.com/wp-content/uploads/2016/03/facebook-Icon-290x290.png"></li>
<li>link</li>
<li>link</li>
</ul>
</div>
.flexcontainer{
display:flex;
}
.flexcontainer ul{
display:flex;
list-style:none;
flex-flow: row wrap;
align-items: center;
}
检查此 https://jsfiddle.net/karantewari/bqh9byj3/ ，希望对您有所帮助:)
注意事项
将导航栏内的容器分成三列。
<div id="my-navbar">
<div class="container">
<!-- Items left -->
<div></div>
<!-- Logo in the center -->
<div></div>
<!-- Items right -->
<div></div>
</div>
</div>
设置 flex: 1 使 .container 中的每一列宽度相同。
备注
当然，如果有更多的项目，例如左侧比右侧的项目小。
示例
body {
margin: 0;
}
#my-navbar img {
display: block;
}
#my-navbar a {
text-decoration: none;
color: white;
}
#my-navbar {
background: #151515;
padding: 10px;
}
#my-navbar .container,
#my-navbar .container>div {
display: flex;
}
#my-navbar .container {
/* Set a max width to squeeze the navbar */
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
#my-navbar .container>div {
flex: 1;
align-items: center;
justify-content: space-around;
}
@media screen and (max-width: 768px) {
#my-navbar .container {
margin: 0;
}
#my-navbar .container,
#my-navbar .container>div {
flex-direction: column;
align-items: flex-start;
}
#my-navbar .item {
margin: 5px;
}
#my-navbar .container>div:nth-child(1) {
order: 2;
}
#my-navbar .container>div:nth-child(2) {
order: 1;
}
#my-navbar .container>div:nth-child(3) {
order: 3;
}
}
<nav id="my-navbar">
<div class="container">
<div>
<div class="item"><a href="">Link</a>
</div>
<div class="item"><a href="">Link</a>
</div>
<div class="item"><a href="">Link</a>
</div>
</div>
<div>
<div class="item"><img src="http://via.placeholder.com/100x50" alt="">
</div>
</div>
<div>
<div class="item"><a href="">Link</a>
</div>
<div class="item"><a href="">Link</a>
</div>
<div class="item"><a href="">Link</a>
</div>
</div>
</div>
</nav>
完整的布尔玛解决方案
不要忘记设置媒体查询，使其不会影响 移动屏幕。
@media screen and (...) {}
在这种情况下，Bulma 使用 min-width: 1088px。
提示
.navbar-burger在里面.navbar-brand：
Bulma navbar
document.addEventListener('DOMContentLoaded', function() {
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function($el) {
$el.addEventListener('click', function() {
// Get the target from the "data-target" attribute
var target = $el.dataset.target;
var $target = document.getElementById(target);
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});
@media screen and (min-width: 1088px) {
#my-navbar-menu>div {
flex: 1;
}
#my-navbar-menu>div>div {
flex: 1;
justify-content: center;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<nav class="navbar">
<div class="navbar-brand">
<div class="navbar-burger burger" data-target="my-navbar-menu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="my-navbar-menu" class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item"><a href="#">Site</a>
</div>
<div class="navbar-item"><a href="#">Site</a>
</div>
<div class="navbar-item"><a href="#">Site</a>
</div>
</div>
<div class="my-navbar-center">
<div class="navbar-item"><img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</div>
</div>
<div class="navbar-end">
<div class="navbar-item"><a href="#">Site</a>
</div>
<div class="navbar-item"><a href="#">Site</a>
</div>
</div>
</div>
</nav>
挤压导航栏
要保持导航栏菜单中项目的弹性行为，最简单的方法是为导航栏设置 display: block 并为导航栏菜单设置 width 并以 margin: 0 auto.
居中
@media screen and (min-width: 1088px) {
.my-navbar {
display: block !important;
}
.my-navbar .navbar-brand {
display: none;
}
#my-navbar-menu {
width: 600px;
margin: 0 auto;
}
#my-navbar-menu>div {
flex: 1;
}
#my-navbar-menu>div>div {
flex: 1;
justify-content: center;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<nav class="navbar my-navbar">
<div class="navbar-brand">
<div class="navbar-burger burger" data-target="my-navbar-menu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="my-navbar-menu" class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item"><a href="#">Site</a>
</div>
<div class="navbar-item"><a href="#">Site</a>
</div>
<div class="navbar-item"><a href="#">Site</a>
</div>
</div>
<div class="my-navbar-center">
<div class="navbar-item"><img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</div>
</div>
<div class="navbar-end">
<div class="navbar-item"><a href="#">Site</a>
</div>
<div class="navbar-item"><a href="#">Site</a>
</div>
</div>
</div>
</nav>
如果您想要纯 CSS 实施的简单性，请查看 Bulma layout > level：
我试图将导航栏内的文本居中，而徽标位于导航栏项之间，但是，我只能将徽标作为品牌形象居中。
这是我的代码：
<a role="button" class="navbar-burger" aria-label="menu" data-target="navMenu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
<nav class="navbar is-white">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src='img/logo.png' style="width: 100px;">
</a>
<div class="navbar-menu" id="navMenu">
<div class="navbar-start">
<a href="#" class="navbar-item nav-text">Paslaugos</a>
<a href="#" class="navbar-item nav-text">Kainos</a>
<a href="#" class="navbar-item nav-text">DUK</a>
<a href="#" class="navbar-item nav-text">Apie Mus</a>
</div>
</div>
</nav>
css
.navbar .navbar-brand {
text-align: center;
display: block;
width: 100%;
}
.navbar .navbar-brand > .navbar-item,
.navbar .navbar-brand .navbar-link {
display: inline-block;
}
任何帮助将不胜感激我已经在这上面花了太多时间。
尝试使用 flex 属性。对于容器 div 你可以给
<div class="flexcontainer">
<ul>
<li>home</li>
<li>About</li>
<li><img src="http://www.monodies.com/wp-content/uploads/2016/03/facebook-Icon-290x290.png"></li>
<li>link</li>
<li>link</li>
</ul>
</div>
.flexcontainer{
display:flex;
}
.flexcontainer ul{
display:flex;
list-style:none;
flex-flow: row wrap;
align-items: center;
}
检查此 https://jsfiddle.net/karantewari/bqh9byj3/ ，希望对您有所帮助:)
注意事项
将导航栏内的容器分成三列。
<div id="my-navbar">
<div class="container">
<!-- Items left -->
<div></div>
<!-- Logo in the center -->
<div></div>
<!-- Items right -->
<div></div>
</div>
</div>
设置 flex: 1 使 .container 中的每一列宽度相同。
备注
当然，如果有更多的项目，例如左侧比右侧的项目小。
示例
body {
margin: 0;
}
#my-navbar img {
display: block;
}
#my-navbar a {
text-decoration: none;
color: white;
}
#my-navbar {
background: #151515;
padding: 10px;
}
#my-navbar .container,
#my-navbar .container>div {
display: flex;
}
#my-navbar .container {
/* Set a max width to squeeze the navbar */
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
#my-navbar .container>div {
flex: 1;
align-items: center;
justify-content: space-around;
}
@media screen and (max-width: 768px) {
#my-navbar .container {
margin: 0;
}
#my-navbar .container,
#my-navbar .container>div {
flex-direction: column;
align-items: flex-start;
}
#my-navbar .item {
margin: 5px;
}
#my-navbar .container>div:nth-child(1) {
order: 2;
}
#my-navbar .container>div:nth-child(2) {
order: 1;
}
#my-navbar .container>div:nth-child(3) {
order: 3;
}
}
<nav id="my-navbar">
<div class="container">
<div>
<div class="item"><a href="">Link</a>
</div>
<div class="item"><a href="">Link</a>
</div>
<div class="item"><a href="">Link</a>
</div>
</div>
<div>
<div class="item"><img src="http://via.placeholder.com/100x50" alt="">
</div>
</div>
<div>
<div class="item"><a href="">Link</a>
</div>
<div class="item"><a href="">Link</a>
</div>
<div class="item"><a href="">Link</a>
</div>
</div>
</div>
</nav>
完整的布尔玛解决方案
不要忘记设置媒体查询，使其不会影响 移动屏幕。
@media screen and (...) {}
在这种情况下，Bulma 使用 min-width: 1088px。
提示
.navbar-burger在里面.navbar-brand：
Bulma navbar
document.addEventListener('DOMContentLoaded', function() {
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function($el) {
$el.addEventListener('click', function() {
// Get the target from the "data-target" attribute
var target = $el.dataset.target;
var $target = document.getElementById(target);
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});
@media screen and (min-width: 1088px) {
#my-navbar-menu>div {
flex: 1;
}
#my-navbar-menu>div>div {
flex: 1;
justify-content: center;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<nav class="navbar">
<div class="navbar-brand">
<div class="navbar-burger burger" data-target="my-navbar-menu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="my-navbar-menu" class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item"><a href="#">Site</a>
</div>
<div class="navbar-item"><a href="#">Site</a>
</div>
<div class="navbar-item"><a href="#">Site</a>
</div>
</div>
<div class="my-navbar-center">
<div class="navbar-item"><img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</div>
</div>
<div class="navbar-end">
<div class="navbar-item"><a href="#">Site</a>
</div>
<div class="navbar-item"><a href="#">Site</a>
</div>
</div>
</div>
</nav>
挤压导航栏
要保持导航栏菜单中项目的弹性行为，最简单的方法是为导航栏设置 display: block 并为导航栏菜单设置 width 并以 margin: 0 auto.
@media screen and (min-width: 1088px) {
.my-navbar {
display: block !important;
}
.my-navbar .navbar-brand {
display: none;
}
#my-navbar-menu {
width: 600px;
margin: 0 auto;
}
#my-navbar-menu>div {
flex: 1;
}
#my-navbar-menu>div>div {
flex: 1;
justify-content: center;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<nav class="navbar my-navbar">
<div class="navbar-brand">
<div class="navbar-burger burger" data-target="my-navbar-menu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="my-navbar-menu" class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item"><a href="#">Site</a>
</div>
<div class="navbar-item"><a href="#">Site</a>
</div>
<div class="navbar-item"><a href="#">Site</a>
</div>
</div>
<div class="my-navbar-center">
<div class="navbar-item"><img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</div>
</div>
<div class="navbar-end">
<div class="navbar-item"><a href="#">Site</a>
</div>
<div class="navbar-item"><a href="#">Site</a>
</div>
</div>
</div>
</nav>
如果您想要纯 CSS 实施的简单性，请查看 Bulma layout > level：