如何使导航栏的文本居中
Posted
技术标签:
【中文标题】如何使导航栏的文本居中【英文标题】: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">
这应该会给你你想要的。
【讨论】:
以上是关于如何使导航栏的文本居中的主要内容,如果未能解决你的问题,请参考以下文章