如何使用navbar bulma中间带有徽标的文本居中

时间：2018-05-11 19:12:14

标签： html css bulma

我试图将文字放在导航栏中，文本位于导航栏项之间，但是，我只能将徽标作为品牌形象居中。 enter image description here

这是我的代码：

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

我非常感谢任何帮助，我已经花了太多时间在这上面。

3 个答案:

答案 0 :(得分：3)

考虑

将导航栏内的容器分成三列。

<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中的每列具有相同的宽度。

注意

当然，如果有更多项目，例如在左侧而不是在右侧，项目较小。

实施例

＆＃13;
＆＃13; 
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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

完整的布尔玛解决方案

请勿忘记设置媒体查询，以便不会影响移动设备屏幕。

@media screen and (...) {}

在这种情况下，Bulma使用min-width: 1088px。

<强>提示

.navbar-burger 里面 .navbar-brand： Bulma navbar

＆＃13;
＆＃13; 
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');

      });
    });
  }

});
＆＃13; 
@media screen and (min-width: 1088px) {
  #my-navbar-menu>div {
    flex: 1;
  }
  #my-navbar-menu>div>div {
    flex: 1;
    justify-content: center;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

挤压导航栏

要在导航栏菜单中保持 项目的弹性行为，最简单的方法是设置display: block导航栏和导航栏菜单的宽度，并以margin: 0 auto为中心。

＆＃13;
＆＃13; 
@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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：3)

如果您想要纯CSS实现的简单性，请查看Bulma layout > level： enter image description here

答案 2 :(得分：0)

尝试使用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/，希望有所帮助：）

相关问题
最新问题