The kids are like puzzle pieces.
I've experimented with different classes like justify-content-center, align-items-center, and text-center, but no luck.
All I want is for the text to be perfectly centered both vertically and horizontally within the square.
This is the HTML structure:
<div className="d-flex flex-row justify-content-center boardRow">
{[...Array(3).keys()].map((col, index_col) => (
<div
className="d-flex flex-column d-flex justify-content-center align-items-center element innerBoard bg-danger">
{children[row * 3 + col]}
</div>
))}
</div>
Here's a glimpse of the CSS styling:
.boardBox {
.element {
border: 1px solid black;
}
.boardRow:first-child .element {
border-top: none;
}
.boardRow:last-child .element {
border-bottom: none;
}
.boardRow .element:first-child {
border-left: none;
}
.boardRow .element:last-child {
border-right: none;
}
}
.innerBoard {
width: 20px;
height: 20px;
}