将导航品牌标题/徽标居中答案

【问题标题】：Centering the navigation brand title/ logo将导航品牌标题/徽标居中
【发布时间】：2023-03-06 13:48:02
【问题描述】：

我正在练习和学习新的 Material Design lite css 框架，我阅读并扫描了他们的网站，但我无法获得如何将导航标题居中的解决方案。如果有人知道怎么做，你能给我一个样本修复吗？这是我目前的代码。

HTML：

<!-- Title -->
 <span class="mdl-layout-title navbar">Title</span>

注意：我添加了一个 .navbar 类，以便我可以覆盖样式。

CSS：

.navbar {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
}

徽标现在居中，但链接被推到右侧，并且可以阅读一些链接。

截图：

【问题讨论】：

标签： html css material-design

【解决方案1】：

您可以使用position: absolute 和transform: translate()

nav {
  position: relative;
  background: #2196F3;
  height: 50px;
}
.mdl-layout-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<nav>
  <span class="mdl-layout-title navbar">Title</span>
</nav>

【讨论】：

试过这个，但品牌名称被推到导航下方。
你是否在父节点上设置了position: relative？
awe，谢谢它现在可以工作，但还有另一个问题。打开侧抽屉时，品牌名称被推下
现已修复。谢谢！

【解决方案2】：

.navbar {
    margin-left:auto;
    margin-right:auto;
    display:block;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;

}

【讨论】：

这也很有用，但需要增加最高值。