gpt4 book ai didi

html - 如何使导航栏中的文本居中?

转载 作者:行者123 更新时间:2023-11-28 15:14:15 26 4
gpt4 key购买 nike

我尝试将我的文本置于导航栏的中央,但它似乎不正确。目前看起来像这样:

我的 enter image description here

但我更希望它是这样的: enter image description here

我的导航栏看起来像这样:

<body data-spy="scroll" data-target=".navbar-collapse">
<div class="navbar navbar-inverse ">
<div class = "container">
<div class="navbar-header navbar-text">
<a class="navbar-brand" href="">Møllaren Café</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<div class = "collapse navbar-collapse">
<ul class = "nav navbar-nav">
<li class = "active"><a href="#">Home</a></li>
<li><a href="#">Meny</a></li>
<li><a href="#">Om oss</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
</div>
</div>
</div>

我的导航栏 CSS 是这样的:

.navbar-text{
width: 100%;
text-align: center;
display: inline-block;

}

这是我的自定义字体:

@font-face {
font-family: 'Diploma Regular';
font-style: normal;
font-weight: normal;
src: local('Diploma Regular'), url('Diploma.woff') format('woff');
}

.navbar-brand{
font-family: 'Diploma Regular';
font-style: normal;
font-weight: normal;
src: local('Diploma Regular'), url('Diploma.woff') format('woff');
}

最佳答案

尝试添加此 css:

.container {
display : flex;
justify-content: center;
}

并删除 navbar-text 样式。

完全不确定这是否有效。重现您的问题的工作示例会有很大帮助。

关于html - 如何使导航栏中的文本居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46083867/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com