引导导航栏中的中心文本

亚科夫·安斯潘(Yaakov Ainspan)

我在StackOverflow上已经看到了这种答案,但是没有一个适合我的目的。我想做的是在导航栏中居中显示文本我见过的所有其他答案都涉及到以导航为中心ul我想做的是.nav-text在导航栏中将a居中我试图居中会text-align: center在导航栏几乎每一个元素(上.navbar.container.navbar-collapse),但他们没有工作。

的HTML

<div id="navbar" style="opacity: 0;">
        <nav class="navbar navbar-default navbar-fixed-top" style="text-align: center;">
          <div class="container" style="text-align: center;">
            <div class="collapse navbar-collapse" style="text-align: center;">
              <ul class="nav navbar-nav">
                <li><a href="/">My Website</a></li>
                <li><a href="#">About</a></li>
              </ul>
              <p class='navbar-text text-center' style='text-align: center;'>My Website</p>
              <ul class="nav navbar-nav navbar-right">
                <p class="navbar-btn"><a href="checkout.php" class="btn btn-success">Continue to checkout <span class='fa fa-arrow-right'></span></a></p>
              </ul>
            </div>
          </div>
        </nav>
      </div>

这怎么工作?

齐姆

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

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

引导导航栏中的中心文本

来自分类Dev

垂直导航栏中的引导文本

来自分类常见问题

响应式引导导航栏中的中心内容

来自分类Dev

中心引导导航栏品牌标志

来自分类Dev

删除导航栏中的后退按钮文本和中心标题

来自分类Dev

Bootstrap-导航栏中的中心文本和搜索字段

来自分类Dev

导航栏中的中心图像

来自分类Dev

引导导航栏链接和导航品牌为中心

来自分类Dev

引导中溢出的导航栏

来自分类Dev

导航栏中的引导图片

来自分类Dev

在Bootstrap导航栏的中心对齐文本

来自分类Dev

引导程序中的中心文本

来自分类Dev

引导导航栏菜单与文本重叠

来自分类Dev

引导程序:折叠时的中心导航搜索栏

来自分类Dev

引导导航栏徽标在中心,项目在左侧和右侧

来自分类Dev

引导程序:折叠时的中心导航搜索栏

来自分类Dev

为什么导航栏中的徽标与 CSS(引导程序)中的容器中的文本不对齐?

来自分类Dev

边栏导航更改为引导中的顶部导航栏

来自分类Dev

在同一行中左对齐徽标文本和中心导航栏

来自分类Dev

引导搜索框和按钮对齐到标题文本的右侧(不在导航栏中)

来自分类Dev

如何在引导导航栏中的文本下方制作居中标签

来自分类Dev

将徽标放在引导导航栏中

来自分类Dev

导航栏中的引导输入组

来自分类Dev

将徽标放入引导导航栏中

来自分类Dev

引导导航栏中的固定搜索框

来自分类Dev

引导导航栏中的下拉边距

来自分类Dev

引导导航栏中的链接错误

来自分类Dev

修复了引导程序中的导航栏

来自分类Dev

引导导航栏中的附加图像