Jquery 引导的位置'；导航条元素

使用bootstrap的navbar元素，我需要在navbar的中心放置一条欢迎消息。我正在使用引导示例中的以下HTML结构：

<nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-5">
          <p class="navbar-text navbar-right welcome-message">Welcome, Tom Delonge</p>
        </div>
      </div>
    </nav>

我想知道是否有一个更好的解决方案，例如只使用CSS。提前感谢。

CSS

.welcome-message {
    position: absolute;
    left: 50%;
 transform:translate(-50%,0);
}

.navbar-collapse {
   text-align:center;
}
.navbar-center {
   display:inline-block;
   float:none;
}

只要上面的CSS就可以了

CSS

.welcome-message {
    position: absolute;
    left: 50%;
 transform:translate(-50%,0);
}

.navbar-collapse {
   text-align:center;
}
.navbar-center {
   display:inline-block;
   float:none;
}

只要上面的CSS就可以了

---

为

欢迎文本

重新构造类，并添加一些用于居中的自定义CSS代码。不需要额外的JS

HTML

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="navbar-collapse" id="bs-example-navbar-collapse-5">
      <p class="navbar-text navbar-center welcome-message">Welcome, A very long name here</a></p>
    </div>
  </div>
</nav>

---

为

欢迎文本

重新构造类，并添加一些用于居中的自定义CSS代码。不需要额外的JS

HTML

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="navbar-collapse" id="bs-example-navbar-collapse-5">
      <p class="navbar-text navbar-center welcome-message">Welcome, A very long name here</a></p>
    </div>
  </div>
</nav>

添加此css

@media only screen and (max-width: 770px) {
    .welcome-message {
        margin-top: -35px;
        position: absolute;
    left: 50%;
 transform:translate(-50%,0);

}
}
@media only screen and (min-width: 770px) {
    .welcome-message {
    position: absolute;
    left: 50%;
 transform:translate(-50%,0);
}
}

添加此css

@media only screen and (max-width: 770px) {
    .welcome-message {
        margin-top: -35px;
        position: absolute;
    left: 50%;
 transform:translate(-50%,0);

}
}
@media only screen and (min-width: 770px) {
    .welcome-message {
    position: absolute;
    left: 50%;
 transform:translate(-50%,0);
}
}

---

删除javascript并用以下内容替换css：

.欢迎辞{
浮动：无！重要；
文本对齐：居中；
}

删除javascript并用以下内容替换css：

.欢迎辞{
浮动：无！重要；
文本对齐：居中；
}