【问题标题】:Center content(logo) in Bootsrap NavbarBootstrap 导航栏中的中心内容(徽标)
【发布时间】:2014-12-04 01:04:32
【问题描述】:

我正在尝试使我的徽标在 boostrap 导航栏中居中。

我一直在寻找多种方法,我找到了一些对我有用的方法,但中心内容会覆盖所有导航栏(无法点击其他链接)。

所以我编写了自己的代码。左右拉都没有问题,但我的中心不会居中!

这是我的代码。

(我已将中心内容的背景颜色设置为红色,以便了解它的大小和面积)

HTML

  <nav class="navbar navbar-default" role="navigation">
    <div class="navbar navbar-fixed-top">

   <!--LEFT OF NAVBAR-->
          <div class="navbar-header pull-left">
            <a class="navbar-brand" href="#">
              <span class="glyphicon glyphicon-align-left"></span>
            </a>
          </div>


    <!--CENTER OF NAVBAR-->
          <div class="navbar-header center">
            <a class="navbar-brand" style="background:red;" href="#">Center</a>
          </div>


      <!--RIGHT OF NAVBAR-->
          <div class="navbar-header pull-right">
            <a class="navbar-brand" href="#" style="font-size:1em;">Sign In</a>
          </div>

        </div>
      </nav>

CSS

.center {
  display:inline-block;
  float:none;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

这是我的 jsfiddle。 http://jsfiddle.net/ew64yt63/

【问题讨论】:

    标签: html css twitter-bootstrap navbar


    【解决方案1】:

    您可以将text-align:center 添加到.navbar

    Demo Fiddle

    .navbar {
        text-align:center;
    }
    

    请注意,您可能需要更改子元素的文本对齐方式。

    或者,您可以偏移和变换元素,例如:

    Demo Fiddle

    .center {
        display:inline-block;
        position:relative;
        left:50%;
        transform:translateX(-100%);
    }
    

    【讨论】:

    • 非常感谢!我已经尝试过了,它有效。唯一的问题是它不会完美地居中内容。它偏离了几个像素.. 有对此的解释吗?
    猜你喜欢
    • 2013-10-17
    • 2021-04-01
    • 2014-03-15
    • 2017-03-19
    • 1970-01-01
    • 1970-01-01
    • 2013-08-30
    • 2013-05-05
    • 1970-01-01
    相关资源
    最近更新 更多