如何在导航栏内将带有徽标的文本居中 [英] How to center text with logo in the middle of it in navbar bulma

问题描述

我正在尝试在导航栏内将文本居中，而徽标位于导航栏项目之间，但是，我只能将徽标作为品牌形象居中.

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.

这是我的代码:

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

推荐答案

注意事项

将导航栏中的容器分为三列.

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>

设置flex: 1可使.container中的每一列具有相同的宽度.

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

注意

当然，如果还有更多物品，例如左侧的物品要比右侧的物品小.

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

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>

不要忘记设置媒体查询，以使其不会影响移动屏幕.

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

@media screen and (...) {}

在这种情况下，布尔玛使用min-width: 1088px.

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

提示

.navbar-burger位于内部 .navbar-brand: 布尔诺导航栏

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居中.

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>

这篇关于如何在导航栏内将带有徽标的文本居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！