here's a pic of what I want to archieve:
I want the text in the horizontal middle aligned with the icons. I have tried stuff as using align-items tag in CSS but it messes up my code, how can I achieve this look that I want without making my icons mess up? Because here's an example of what happens when I try to do it with align items tag
align items center
align items baseline
my code:
<header>
<div class="header-text">
<h1 class="titulo-logo">NeoKisa</h1>
</div>
<nav>
<img
class="header-icons"
src="/icons/header_bell.svg"
alt="Notificaciones"
/>
<img
class="header-icons"
src="/icons/header_user.svg"
alt="Mi Perfil"
/>
<span class="header-text">Vender</span>
<span class="header-text">Publicaciones</span>
<img
src="/icons/header_detail.svg"
alt="Detalles"
class="header-icons"
/>
</nav>
</header>
my css:
body {
margin: 0px;
padding: 0px;
font-family: roboto;
}
.header-text {
position: relative;
margin: 2px 6px 2px 4px;
cursor: pointer;
}
.header-icons {
width: 32px;
margin: 2px 0px 2px 0px;
cursor: pointer;
}
header {
display: flex;
justify-content: space-between;
background-color: rgb(20, 33, 61);
color: white;
height: 30px;
align-items: center;
padding: 6px;
}
Thank you and sorry my bad English. I'm just a beginner so I'm really confused... I will appreciate your kind help
You need add flex type to nav element.
I think this will solve your problem
nav{
display: flex;
align-items: center;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.