как мне получить глификон в центре навигационной панели начальной загрузки?

Я пытаюсь получить глификон-логин в центре навигационной панели начальной загрузки, и даже не попадая в навигационную панель, это означает, что он отображается над навигационной панелью при отладке.

<a class="navbar-brand pull-left" href="/"><img src="images/logo.png" alt="Elunika"></a>

<span class="glyphicon glyphicon-log-in" id="logIcon"></span>

<div class="nav-collapse collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav pull-right">
                <li class="active">
                    <a href="#">HOME</a>
                </li>
                <li>
                    <a href="#">ABOUT</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> WHO, HOW & WHAT? </a>

                <ul class="dropdown-menu">
                    <li>
                        <a href="#">WHO WE ARE?</a>
                    </li>

                    <li>
                        <a href="#">WHAT IS IT?</a>
                    </li>

                    <li>
                        <a href="#">HOW IT WORKS?</a>
                    </li>

                </ul>
                    </li>
                <li>
                    <a href="#">CONTACT US</a>
                </li>
        </ul>
  </div>

и css для logIcon выглядит следующим образом

#logIcon{
position: absolute;
margin-left:auto;
margin-right:auto;
}

спасибо за любую помощь заранее


html css twitter-bootstrap glyphicons
person user2881430    schedule 14.09.2014    source источник
comment
Почему вы используете position:absolute? Это означает, что он будет отображаться в (0,0) = верхнем левом углу первого родительского элемента с абсолютной или относительной позицией.   -  person knittl    schedule 14.09.2014
comment
если мы пойдем с левой: 0; и справа: 0; тогда он должен прийти в центр.... не так ли...?   -  person user2881430    schedule 14.09.2014
comment
left:0; и right:0; заставят его охватывать всю ширину содержащего элемента   -  person knittl    schedule 14.09.2014
comment
так что может быть возможным способом сделать это...?   -  person user2881430    schedule 14.09.2014
comment
я использую position:absolute; так что это не повлияет на положение других элементов.   -  person user2881430    schedule 14.09.2014
comment
Я не знаю, как должен выглядеть результат. Можете ли вы поиграть с текущим результатом и, возможно, с графическим макетом, показывающим ожидаемый результат?   -  person knittl    schedule 14.09.2014
comment
bootsnipp.com/snippets/featured/navbar-brand-centered вероятно, будет таким же, как я хочу, разница в том, что я хочу глификон в центре вместо бренда   -  person user2881430    schedule 14.09.2014
comment
тогда вам нужно только заменить текстовую марку на ваш диапазон глификонов. Я пробовал, работает   -  person knittl    schedule 14.09.2014
comment
Вы можете поместить это как ответ здесь ...?   -  person user2881430    schedule 14.09.2014
comment
потому что в том глификоне не видно   -  person user2881430    schedule 14.09.2014

Ответы (2)


arrow_upward
4
arrow_downward

Из вашего связанного бутниппа вам нужно только заменить слово «бренд» на ваш диапазон глификонов.

<div class="navbar-brand navbar-brand-centered"><span class="glyphicon glyphicon-log-in" id="logIcon"></span></div>

Вот код рабочей скрипки: http://www.bootply.com/EmzUMHPXqd

person knittl    schedule 14.09.2014

arrow_upward
1
arrow_downward

http://www.bootply.com/eHiWDODA83

Вы можете создать новый класс для значка, подобного этому.

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

А затем используйте разметку, подобную этой.

<nav class="navbar" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <a class="navbar-center navbar-text" href="#"><span class="glyphicon glyphicon-log-in" id="logIcon"></span></a>
  <div class="navbar-collapse collapse">
    <a class="navbar-brand" href="/"><img src="images/logo.png" alt="Elunika"></a>

    <ul class="nav navbar-nav navbar-right">
      <li class="active">
        <a href="#">HOME</a>
      </li>
      <li>
        <a href="#">ABOUT</a>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> WHO, HOW &amp; WHAT? </a>

        <ul class="dropdown-menu">
          <li>
            <a href="#">WHO WE ARE?</a>
          </li>

          <li>
            <a href="#">WHAT IS IT?</a>
          </li>

          <li>
            <a href="#">HOW IT WORKS?</a>
          </li>

        </ul>
      </li>
      <li>
        <a href="#">CONTACT US</a>
      </li>
    </ul>
  </div>
</nav>

http://www.bootply.com/eHiWDODA83

person Zim    schedule 14.09.2014
comment
Я использую его без абсолютного атрибута, и он прекрасно работает. - person Laur Ivan; 24.08.2015