如何通过忽略某些项目来对齐项目？

Answer 1

.cart-icon img{
width: 30px;
}

.bell-icon img{
width: 30px;
}

.container{
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}

.color-bg{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: -5px;
width: 16px;
height: 16px;
background-color: yellow;
border-radius: 50%;
}

.cart-icon{
position: relative;
top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<div class="container">
<div class="cart-icon">
<img src="https://cdn-icons-png.flaticon.com/512/3081/3081986.png" />
<div class="color-bg">
<p>1</p>
</div>
</div>
<div class="bell-icon">
<img src="https://icons.veryicon.com/png/o/miscellaneous/fine-fillet-icon/notification-bell.png" />
</div>
</div>