Как центрировать несколько изображений внутри тега привязки

Question

Я хочу изображения в центре, но не могу сделать это на экранах medium, large и extra-large

 <nav class="navbar">
    <div class="row">
        <div class="col-12 d-flex justify-content-center">
            <a href="/html"><img src="./images/devices.png" alt="devices"></a>
            <a href="/html"><img src="./images/media.png" alt="media"></a>
            <a href="/html"><img src="./images/logo.png" alt="logo"></a>
            <a href="/html"><img src="./images/stream.png" alt="stream"></a>
            <a href="/html"><img src="./images/logout.png" alt="logout"></a>
        </div>
    </div>
</nav>

Я пробовал разные решения, представленные на сайте stackoverflow, но ни одно не помогло,Пожалуйста, помогите, я новичок

Answer 1

Я не совсем понимаю, что вам нужно, но, думаю, вы можете обратиться к следующим 2 страницам:

• .nav класс
• .navbar class

Обычно навигации представляют собой панель с несколькими ссылками или раскрывающимися списками.Поэтому я не понимаю, как это можно оправдать.

Здесь, в двух примерах, один с классом .nav, который я расположил горизонтально.Один с классом .navbar, который я расположил вертикально.

Содержимое элементов центрировано.

Надеюсь, это поможет.

.navbar, .nav {
background-color: #A4A4A4;
border: 1px solid red;
}

/* for the purpose of demonstration, I added borders to the Nav-ul */
#top-menu {
border: 1px solid red;
}

.nav-link {
width: 100px;
text-align: center;
/* for the purpose of demonstration, I added borders to the list items */
border: 1px solid black;
}

.dont_copy_this {height: 50px;}

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

<nav class="nav">
    <div class="row">
        <div class="col-12 d-flex justify-content-center">
            <a class="nav-link" href="/html"><img src="./images/devices.png" alt="devices"></a>
            <a class="nav-link" href="/html"><img src="./images/media.png" alt="media"></a>
            <a class="nav-link" href="/html"><img src="./images/logo.png" alt="logo"></a>
            <a class="nav-link" href="/html"><img src="./images/stream.png" alt="stream"></a>
            <a class="nav-link" href="/html"><img src="./images/logout.png" alt="logout"></a>
        </div>
    </div>
</nav>

<div class="dont_copy_this"></div>

<nav class="navbar">
  <ul id="top-menu" class="navbar-nav">
    <li class="nav-item"><a class="nav-link" href="/html"><img src="./images/devices.png" alt="devices"></a></li>
    <li class="nav-item"><a class="nav-link" href="/html"><img src="./images/media.png" alt="media"></a></li>
    <li class="nav-item"><a class="nav-link" href="/html"><img src="./images/logo.png" alt="logo"></a></li>
    <li class="nav-item"><a class="nav-link" href="/html"><img src="./images/stream.png" alt="stream"></a></li>
    <li class="nav-item"><a class="nav-link" href="/html"><img src="./images/logout.png" alt="logout"></a></li>
  </ul>
</nav>