我需要确保带有 AMIRI(title) 铭文的SVG位于中心nav(垂直和水平),带有三条纹 ( ) 的SVGnav-menu位于左侧且垂直位于中心。
问题是如何分离网格中的元素flex。
我想要什么:
|||__阿米里<3______0 (:
HTML/CSS:
nav {
height: 100px;
}
.flex-container {
height: 100px;
display: flex;
align-items: center;
}
.title {
justify-items: center;
}
<body>
<header>
<nav>
<div class="flex-container">
<div class="flex-element nav-menu">
<img src="img/navmenu.svg">
</div>
<div class="flex-element title">
<img src="img/title.svg">
</div>
<div class="flex-element liked>
<img src="img/liked.svg">
</div>
<div class="flex-element basket">
<img src="img/basket.svg">
</div>
<div class="flex-element profile element-right">
<img src="img/profile.svg">
</div>
</div>
</nav>
</header>
</body>