CSS中如何使叉号图标与文本可靠对齐？

你的问题出在叉号图标的伪元素定位和容器对齐逻辑上，以下是无需依赖硬编码margin/padding的可靠修复方案，能适配不同屏幕尺寸：

核心问题分析 #

• 叉号容器（.crossmark）未设置内部元素的对齐规则，伪元素默认从左上角绘制，旋转后自然偏右上
• 伪元素尺寸超出容器范围，且无居中定位，进一步加剧了偏移

修复后的CSS代码 #

.list {
    font-family: sans-serif;
    margin: 1rem 0 1rem !important;
}

.checkmark {
    transform: rotate(45deg);
    height: 24px;
    width: 12px;
    border-bottom: 7px solid lightgreen;
    border-right: 7px solid lightgreen;
    /* 给对勾添加统一对齐规则，确保一致性 */
    margin: auto;
}

.crossmark {
    height: 24px;
    width: 24px; /* 调整容器宽度匹配伪元素尺寸 */
    position: relative;
    /* 启用flex布局，让内部伪元素自动居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto; /* 和对勾保持一致的水平居中 */
}

.crossmark::after,
.crossmark::before {
    position: absolute;
    content: '';
    width: 24px;
    height: 7px; /* 直接设置高度替代border，简化逻辑 */
    background-color: orange;
}

.crossmark::after{
    transform: rotate(45deg);
}

.crossmark::before{
    transform: rotate(-45deg);
}

.highlighted-err {
    background-color: red;
    color: white;
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.highlighted-success {
    background-color: darkgreen;
    color: white;
    border-radius: 0.5rem;
    padding: 0.5rem;
}

关键修改点说明 #

1. 统一容器对齐：给.checkmark和.crossmark都加上margin: auto，确保它们在Bootstrap的col-md-1容器中水平居中，和文本行对齐逻辑一致
2. 重构叉号绘制逻辑：把伪元素的border替换为直接设置background-color和height，避免冗余写法，逻辑更直观
3. 启用flex居中：.crossmark用flex布局让内部伪元素自动垂直水平居中，彻底解决偏移问题，且完全响应式
4. 匹配容器尺寸：将.crossmark宽度调整为24px，和伪元素尺寸一致，避免元素超出容器范围

修改后，叉号和对勾会与文本完美对齐，且无论屏幕尺寸如何变化，布局都能保持一致，不会出现偏移失效的问题。

内容的提问来源于stack exchange，提问作者alex