Question

Собственно, вопрос.

В шапке сайта расположен <div class="profile"> со следующими стилями:

.profile {display: block;
          height: 55px;
          line-height: 55px;
          color: #FFFFFF !important;
          text-decoration: none !important;
          font-size: 20px;
          float: right;}

<div class="profile">
<?ifnot($USER_LOGGED_IN$)?>
<a href="$LOGIN_LINK$"><span class="glyphicon glyphicon-log-in" aria-hidden="true"></span></a>
<?else?>
<a href="$ADD_ENTRY_LINK$"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a>
<a href="$LOGOUT_LINK$"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span></a>
<?endif?>
</div>

Как видим, там происходит следующее: стоит кнопка, вызывающая форму авторизации, после авторизации, на ее месте появляются две кнопки - "выход" и "добавить материал".

Проблема в том, что когда пользователь авторизован, кнопки отцентрованы по высоте блока, а когда не авторизован - кнопка входа уходит вверх.

Как это можно исправить?

 

Answer 1

Найдите в css класс

.glyphicon {

1. position: relative;
2. top: 1px;

Обратите внимание на параметр top. Сейчас там стоит смещение картинки на 1 px от верха. Вот и задайте нужный отступ 

Comments

Но каким образом центрируются кнопки после авторизации?

Сделал отступ, спустил кнопку "вход" в середину, но после авторизации кнопки "выход" и "добавить материал" съехали вниз.

---

Так и не понял почему он съезжает. Вроде все правильно. Задайте тогда для этого спана position:relative; top:10px (подогнать)

---

<span class="glyphicon glyphicon-log-in" aria-hidden="true" style="position: relative; top: 16px;"></span>

Добавил стиль именно к этому span. Получилось. Спасибо за помощь.