Как центрировать div, содержащий текстовую метку, прямо под другим div, содержащим значок, на панели инструментов ⇐ CSS

[Anonymous]

У меня есть этот компонент реагирования:

Код: Выделить всё

const IslandDash = () => {
return (





Home




);
};

Как мне центрировать этот элемент p под значком TbHome?
Вот код для CSS-обертки:

Код: Выделить всё

import styled from "styled-components";

const Wrapper = styled.section`
.dashboard {
width: max-content;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--foreground);
color: var(--primary-dark);
border-radius: var(--border-radius);
margin: auto;
margin-top: 30px;
padding: 0px 30px;
column-gap: 20px;
}
.translate {
padding: 0px 20px;
position: absolute;
top: 0;
right: 100px;
}

.dash-items {
width: 30px;
height: 30px;
color: var(--primary-dark);
stroke-width: 1.5;
transition: transform 185ms ease-in-out;
}
.dash-items:hover {
color: var(--primary-light);
cursor: pointer;
transform: translateY(-5px) scale(1.1);
}

.label-container {
border-color: red;
border-style: solid;
color: var(--primary-light);
}
.dash-item-container {
border-color: green;
border-style: solid;
display: grid;
}
`;
export default Wrapper;

Я попробовал позицию «Абсолют», которая здесь нежизнеспособна, поскольку не будет реагировать.
Моей следующей мыслью было использовать сетку, но это тоже не сработало. Результаты вы можете увидеть ниже:
Предназначенный дизайн
Мой результат
Я добавил цвет границы, чтобы вы может визуализировать элементы div.

Подробнее здесь: https://stackoverflow.com/questions/791 ... aining-ico