Question

我在StackOverflow上看到过这种类型的几个答案，但它们都不适合我的目的。我要做的是在导航栏中居中文字。我见过的所有其他答案都以导航cherry-pick为中心。我想要做的是在导航栏中居中ul。我尝试使用.nav-text将文本居中放在导航栏中的几乎所有元素上（text-align: center，.navbar，.container），但这些元素都不起作用。

HTML

.navbar-collapse

这怎么办？

Answer 1

我认为最好的方法是使用position:absolute。为此创建一个特殊类，并将该类添加到navbar-text。

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

http://www.codeply.com/go/KLxn8UrXFW

Answer 2

在这种情况下请考虑z-index，否则您无法单击导航菜单。感谢

.nabvar-text {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  text-align: center;
  z-index: 10;
 }

.navbar-nav,
.navbar-right {
  position: relative;
  z-index: 99;
 }

Answer 3

强制浮动为“无”对我有用。覆盖默认浮动然后只需文本对齐：居中。

  .navbar-text{
    float: none;
    text-align: center;
  }

bootstrap导航栏中的中心文本

3 个答案: