Use CSS grid to align an ALT SYMBOL and regular text? - html

Question

Aanyone know the best way to align an "alt symbol" with "regular text" - can't seem to get these two to both be centered (or anything) without some hacky maneuvers.
I'm currently using CSS grid but I'm open to other solutions if they're easy and sustainable to implement.
display.jsx
<div onClick={props.toggle} className='data__item__header'>
<span className='data__item__header__bullet'>●</span>
<p className='data__item__header__title'>Clashes {props.index}</p>
</div>
display.scss
.data__item__header {
display: grid;
grid-template-columns: 20px 1fr;
line-height: 20px;
align-content: center;
grid-gap: 10px;
}
.data__item__header__bullet {
font-size: 36px;
color: $tomato;
border: 1px solid blue;
display:grid;
text-align: center;
}
.data__item__header__title {
border: 1px solid green;
}
Currently is:
Should be:

Answer 1

Add align-self: center and justify-self: center to the .data__item__header__bullet element, and also adjust the line height - see demo below:
.data__item__header {
display: grid;
grid-template-columns: 20px 1fr;
line-height: 36px; /*changed*/
/* align-content: center; */ /* not needed */
grid-gap: 10px;
}
.data__item__header__bullet {
font-size: 36px;
color: $tomato;
border: 1px solid blue;
display:grid;
text-align: center;
align-self: center; /* added */
justify-self: center; /* added */
}
.data__item__header__title {
border: 1px solid green;
}
<div class='data__item__header'>
<span class='data__item__header__bullet'>●</span>
<p class='data__item__header__title'>Clashes {props.index}</p>
</div>
Instead of using ● character which may give you alignment issues, you can use border-radius to give you a better bullet style - see demo below:
.data__item__header {
display: grid;
grid-template-columns: 20px 1fr;
grid-gap: 10px;
}
.data__item__header__bullet {
background: blue;
border-radius: 100%; /* added */
height: 10px; /* added */
width: 10px; /* added */
display:grid;
text-align: center;
align-self: center;
justify-self: center;
}
.data__item__header__title {
border: 1px solid green;
}
<div class='data__item__header'>
<span class='data__item__header__bullet'></span>
<p class='data__item__header__title'>Clashes {props.index}</p>
</div>