#html #css #flexbox
Вопрос:
Я хочу выровнять значки внутри этого nav-bar . Я попытался выровнять их с помощью flexbox, вертикального выравнивания и т. Д. Я перепробовал все, но, похоже, это не работает. Должен ли я переписать код внутри списка?
Текущий код выглядит следующим образом:
.nav-bar { display: flex; flex-direction: column; position: relative; } lt;div class="container"gt; lt;div class="nav-bar"gt; lt;img src="assets/Ics/....svg"gt;lt;a routerLink=".."gt;Carlt;/agt; lt;img src="assets/Ics/...svg"gt;lt;a routerLink=".."gt;Makelt;/agt; lt;img src="assets/Ics/...svg"gt;lt;a routerLink=".."gt;Aboutlt;/agt; lt;/divgt; lt;/divgt; Ответ №1:
Вам нужно сохранить свой img и тег привязки в контейнере flex со align-items свойством `
.nav-bar div { display: flex; align-items: center; } lt;div class="nav-bar"gt; lt;divgt;lt;img src="assets/Ics/....svg"gt;lt;a routerLink=".."gt;Carlt;/agt;lt;/divgt; lt;divgt;lt;img src="assets/Ics/...svg"gt;lt;a routerLink=".."gt;Makelt;/agt;lt;/divgt; lt;divgt;lt;img src="assets/Ics/...svg"gt;lt;a routerLink=".."gt;Aboutlt;/agt;lt;/divgt; lt;/divgt; Комментарии:
1. Спасибо!!!!!!!!!!!
Ответ №2:
Да, вы можете использовать тег li, как показано ниже
lt;div class="container"gt; lt;div class="nav-bar"gt; lt;ul style="list-style: none;"gt; lt;ligt;lt;img src="assets/Ics/....svg" gt;lt;a routerLink=".."gt;Carlt;/agt;lt;/ligt; lt;ligt;lt;img src="assets/Ics/...svg"gt;lt;a routerLink=".."gt;Makelt;/agt;lt;/ligt; lt;/ulgt; lt;/divgt; lt;/divgt;