如何在导航栏 bulma 中将带有徽标的文本居中

Question

I'm trying to center text inside navbar with the logo being in between navbar items, however, I was only able to center logo as brand image.

Here's my code:

<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;
}

Any help would be greatly appreciated I have already spent way too much time on this.

Answer 1

Considerations

Divide the container inside the navbar into three columns.

<div id="my-navbar">
  <div class="container">
    <!-- Items left -->
    <div></div>
    <!-- Logo in the center -->
    <div></div>
    <!-- Items right -->
    <div></div>
  </div>
</div>

Set flex: 1 to make each column in .container the same width.

Note

Of course, if there are more items, eg on the left side than on the right side, the items are smaller .

Example

 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>

---

Complete Bulma solution

Don't forget to set a media query so that it doesn't affect mobile screens.

@media screen and (...) {}

In this case, Bulma uses min-width: 1088px .

Hint

The .navbar-burger is inside the .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>

Squeeze the navbar

To keep the flex behavior for the items in the navbar menu, the easiest way would be to set display: block for the navbar and a width for the navbar menu and center it with 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>

Answer 2

If you want the simplicity of a pure CSS implementation then check Bulma layout > level out:

Answer 3

Try using the flex property. To the container div you can give

<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;

}

check this https://jsfiddle.net/karantewari/bqh9byj3/ , hope it helps :)