如何使导航栏的文本居中

Posted 2023-03-29

【中文标题】如何使导航栏的文本居中

【英文标题】：How to center the text of navbar

【发布时间】：2020-09-09 11:55:18

【问题描述】：

我对 CSS 不太满意。根据此代码。如何在导航栏中将 My Website 文本居中？

这是一个 JS fiddle 工作示例：https://jsfiddle.net/cvp8w2tf/2/ 感谢您的帮助！

【参考方案1】：

Bootstrap 4 有许多实用程序类可供您使用，您不必编写任何自定义 CSS 来完成您想要的。

检查导航栏，我发现它没有拉伸页面的整个宽度，因此您需要use the w-100 utility class（它将元素的宽度设置为 100%）。

这将使导航项保持左对齐。由于.navbar 是一个弹性容器，您所要做的就是add the justify-content-center utility class，它将使导航栏中的所有内容居中。

所以下面的<nav> 元素：

<nav class="navbar navbar-light bg-light text-primary navbar-personalized">

应该变成：

<nav class="navbar navbar-light bg-light text-primary navbar-personalized w-100 justify-content-center">

这应该会给你你想要的。