任何人都知道将“alt 符号”与“常规文本”对齐的最佳方法 - 似乎无法让这两个都居中(或任何东西)而不需要一些 hacky 操作。
我目前正在使用 CSS 网格,但如果其他解决方案易于实现且可持续,我愿意接受它们。
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;
}
目前是:
应该是:
最佳答案
在 .data__item__header__bullet
元素中添加 align-self:center
和 justify-self:center
,同时调整行高 - 见演示如下:
.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>
与其使用 ●
字符,可能会给你对齐问题,你可以使用 border-radius
来给你一个更好的子弹样式 - 请参见下面的演示:
.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>
关于html - 使用 CSS 网格对齐 ALT SYMBOL 和常规文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55459669/