[英]How can I align my icons left-horizontally and center-vertically without moving my text?
[英]How can I align the text of my header in the middle (horizontally) with icons? (flexbox)
我希望水平中间的文本与图标对齐。 我已经尝试过在 CSS 中使用 align-items 标签的东西,但是它弄乱了我的代码,如何在不弄乱图标的情况下实现我想要的外观? 因为这是我尝试使用 align items 标签执行此操作时发生的示例
对齐项目中心
对齐项目基线
我的代码:
<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>
我的 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;
}
谢谢你,对不起我的英语不好。 我只是一个初学者,所以我真的很困惑......我会感谢你的帮助
您需要将 flex 类型添加到导航元素。
我认为这将解决您的问题
nav{
display: flex;
align-items: center;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.