[英]How can I align the text of my header in the middle (horizontally) with icons? (flexbox)
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?
我已经尝试过在 CSS 中使用 align-items 标签的东西,但是它弄乱了我的代码,如何在不弄乱图标的情况下实现我想要的外观? Because here's an example of what happens when I try to do it with align items tag
因为这是我尝试使用 align items 标签执行此操作时发生的示例
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:我的 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.您需要将 flex 类型添加到导航元素。
I think this will solve your problem我认为这将解决您的问题
nav{
display: flex;
align-items: center;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.