Bootstrap4: Как выровнить изображение в меню?

Question

Я не могу справиться с меню, я по большей части backend'ер Но пришлось делать frontend.

Вот меню,

<nav class="navbar navbar-dark bg-dark text-light">
    <a href="/product" class="text-light">Аккаунты</a>
    <a class="navbar-brand" href="/"><img src="resources/images/logo.png" width="80" /></a>
    <button class="btn btn-link text-light" id="register">Регистрация</button>
    <button class="btn btn-link text-light" id="login">Вход</button>
</nav>

Пк: Смартфон:

Как выровнить лого по центру? Чтоб картинка была в центре, а ссылки были по сторонам.

Есть ли решение? Помогите пожалуйста новичку в css, bootstrap4.

Answer 1

Держи

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-dark bg-dark text-light row text-center">
<div class="col-4 col-sm">
    <a href="/product" class="text-light">Аккаунты</a>
</div>
<div class="col-4 col-sm">
    <a class="navbar-brand" href="/"><img src="https://музыкалка-онлайн.рф/public/img/logo.png" width="80" /></a>
</div>
<div class="col-4 col-sm">
    <a href="/product" class="text-light mr-auto">Мой аккаунт</a>
</div>
<div class="col-4 col-sm">
    <button class="btn btn-link text-light" id="register">Регистрация</button>
</div>
<div class="col-4 col-sm">
    <button class="btn btn-link text-light" id="login">Вход</button>
</div>
</nav>

БЛОГ НА HUSL

Bootstrap4: Как выровнить изображение в меню?

Ответы (1 шт):