Как выровнять изображение в одной строке с содержимым тега <nav>? - PullRequest
Новая
       16

Как выровнять изображение в одной строке с содержимым тега <nav>?

0 голосов
/ 27 января 2019

Это изображение поможет понять мою проблему
Есть ли способ сделать изображение логотипа идеально совпадающим с другим содержимым тега nav?

Это мой код; 

<nav>
<ul>
    <li><img id="nav_img" src="nav_img.png" alt="logo" title="nav_img"></li>
    <li><a href="#">Home</a> </li>
    <li><a href="#"> About</a></li>
    <li><a href="#"> Contact</a></li>
    <li><a href='#'> FAQ </a></li>
    <li><a href='#'> Download </a></li>
</ul>

Ответы [ 2 ]

0 голосов
/ 27 января 2019

Попробуйте добавить "justify-content: center;"на ваш ul после align-items.

ul {
display:flex; 
align-items: center;
justify-content; center;
list-style: none;
}

Редактировать: Если выровнять элементы align и justify-content по центру с отображением flex, все дочерние элементы будут центрированы по обеим осям.

0 голосов
/ 27 января 2019

Вы можете использовать flexbox для вертикального выравнивания вашего логотипа с остальными элементами списка, просто повернув родительский элемент элементов, которые вы хотите вертикально центрировать, что в вашем случае является <ul> в flexbox (display:flex;) и указание вертикального и горизонтального выравнивания его дочерних элементов для центрирования (align-items: center; & justify-content:center;).

Это автоматически изменит ваши дочерние <li> элементы для сгибания элементов и выравнивания по вертикали + по горизонталиих друг другу.

Проверьте и выполните следующий Фрагмент кода для практического примера того, что я описал выше: 

ul {display:flex; align-items: center;justify-content:center;list-style: none;}
<nav>
<ul>
    <li><img id="nav_img" src="https://picsum.photos/75/75" alt="logo" title="nav_img"></li>
    <li><a href="#">Home</a> </li>
    <li><a href="#"> About</a></li>
    <li><a href="#"> Contact</a></li>
    <li><a href='#'> FAQ </a></li>
    <li><a href='#'> Download </a></li>
</ul>
</nav>
...