html - Bootstrap 4 - 将品牌置于导航栏中心

标签 html css bootstrap-4

<分区>

我试图将品牌置于下方导航栏的中心。我尝试更改样式以使文本居中,但我尝试过的任何方法都不起作用。我附上了它现在的样子的照片。我只需要将文本居中而不是在左侧设置格式。

enter image description here

<nav class="navbar fixed-top flex-md-nowrap navbar-expand-sm navbar-dark shadow" style="padding-top: 0; padding-bottom: 0; background-color:var(--theme-gray)">
      <a class="navbar-brand" href="#" style="padding: 0;">
        <img src="img/Cama-i Ellam Yui Logo - Header, Large.jpg"  alt="logo" style="height:65px;">
      </a>
        <div class="container-fluid">
    <div class="navbar-header">
      <span class="navbar-brand">Qaneryararvik: The Yup'ik Word Place</span>
    </div>
    </div>
<!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Words</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About Us</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Acknowledgements</a>
    </li>
  </ul>
</nav>

最佳答案

应用此 CSS:

.navbar-header{
    width: 100%;
    text-align: center;
}

或者

您可以使用 Bootstrap 的 w-100 和文本中心类。

<div class="navbar-header w-100 text-center">
    <span class="navbar-brand">Qaneryararvik: The Yup'ik Word Place</span>
</div>

关于html - Bootstrap 4 - 将品牌置于导航栏中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52941022/

上一篇:javascript - React 不会在 Safari 或 IE 或任何移动网络浏览器中加载图像

下一篇:javascript - 延迟函数调用并显示类图像 10 秒

相关文章:

javascript - 从 querySelectorAll 更改为 getElementsByClassName 后,按钮未按预期删除元素

html - 使 Twitter Widget 的高度与其父 Div 的高度动态成比例

html - SVG 笔划 url : linearGradient is working but solidColor is not

javascript - 当我尝试使用 setTimeout() 为其设置动画时,div 不会变小吗?

css - Rails Bootstrap 2.3.1 导航栏颜色

javascript - 如何在单击按钮时在 JavaScript 中创建动态数组

javascript - 如何在 imageclick 上做下拉?

css - 通过选择器添加 CSS 类

css - 无法处理引导 css

html - Bootstrap 4 : Is there a fix/workaround for false anti-aliasing in MS Edge for the border of sticky th