Как поставить картинку на один уровень с текстом?

Question

[dvrr]

Всем привет, хочу сделать навбар меню, но не знаю как расположить картинку так, чтобы она была на одном уровне с текстом.

Comments

[Ivan Ustûžanin]

vertical-align для картинки, но это же база и не знать такое как-то странно

Answer 1

[Полина]

.user-avatar {
  vertical-align: middle;
  width: 30px;
  height: 30px;
  margin-right: 10px; /* расстояние между иконкой и именем пользователя  */ 
}

Comments

[Максим]

вы же flex используете, тогда можно применить gap

[dvrr]

Полина , не работает

[Полина]

dvrr, давьте свой код, который есть сейчас, будем разбираться

[dvrr]

Полина,

<header>
    <div class="brand"><a href="#">test</a></div>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
        </ul>
    </nav>
    {% if authorized %}
    <ul>
    <li class="dropdown">
    <div class="navbar-item">
    <a href="javascript:void(0)" class="dropbtn"><img src="{{avatar_url}}" class="user-avatar">{{user.name}}</a>
    </div>
    <div class="dropdown-content">
    <div class="navbar-item">
    <a href="#"><img src="{{avatar_url}}" class="user-avatar">{{user.name}}</a>
    </div>
    <a href="/servers">Servers</a>
    <a href="/logout">Logout</a>
    </div>
  </li>
</ul>
{% else %}
    <nav>
        <ul>
            <li><a href="/login">Login</a></li>
        </ul>
    </nav>
{% endif %}
</header>

[Максим]

dvrr, ну тогда тегу а сделать flex и align-items: center

[dvrr]

Максим, хорошо, попробую

[dvrr]

Максим, не работает

[Полина]

dvrr, поправила немного. Попробуйте так.

Обратите внимание, что эти ссылки

<a href="/servers">Servers</a>
<a href="/logout">Logout</a>

у вас пока просто идут друг за другом и образуют одну строку. Я бы предложила обернуть

<div class="navbar-item">
<a href="/logout">Logout</a>
</div>

[dvrr]

Полина, хорошо

[dvrr]

Полина, спасибо, все работает