Html Internet Explorer中的文本未居中于跨距中

我想将文本在跨度中居中对齐。为什么它只适用于Chrome，而不适用于IE

.txt{
对齐项目：居中；
背景色：rgba（0,0,0,0.0980392）；
背景图像：无；
边框底色：rgba（0,0,0,0.117647）；
边框底部样式：实心；
边框底宽：1px；
边界塌陷：塌陷；
边界图像开始：0px；
边界图像重复：拉伸；
边界图像切片：100%；
边界图像源：无；
边框图像宽度：1；
左边框颜色：rgba（0,0,0,0.117647）；
左边框样式：实心；
左边框宽度：1px；
右边框颜色：rgba（0,0,0,0.117647）；
右边框样式：实心；
右边框宽度：1px；
边框顶部颜色：rgba（0,0,0,0.117647）；
边框顶部样式：实心；
边框顶部宽度：1px；
盒影：无；
框大小：边框框；
颜色：rgb（0,0,0）；
游标：默认值；
显示器：flex；
填充：rgb（0,0,0）；
浮动：左；
字体系列：MetricWeb媒体，arial；
字体大小：16px；
高度：48px；
证明内容：中心；
线高：16px；
保证金底部：1.54688px；
左边距：1.54688px；
右边距：1.54688px；
利润上限：1.54688px；
轮廓颜色：rgb（0,0,0）；
轮廓样式：无；
轮廓宽度：0px；
垫底：6px；
左侧填充：12px；
右侧填充：12px；
填充顶部：6px；
文本对齐：居中；
空白：nowrap；
宽度：35.875px；
-webkit用户选择：无；
}

---

2016

我对你的JSFIDLE做了一个修改

您的字体大小与您选择的字体大小填充不匹配。向左填充导致从左侧偏移中心。此外，您的框太小，无法容纳16分的字体大小

JSFIDLE Change ver5-删除所有填充，保持相同的字体大小，并将宽度增加到70px

JSFIDLE Change ver6-将字体大小从16减小到12px，左右填充从6px和12px减小到3px

---

问题在于每个浏览器呈现左右

填充的方式

在代码中，您有：

.txt {
    padding-left: 12px;
    padding-right: 12px;
}

Chrome在小容器中将文本居中时基本上会忽略此填充：


但IE11尊重填充：


解决方案是简单地删除水平填充：

.txt {
    padding-left: 0;
    padding-right: 0;
}

我可以看到您正在使用display:flex，请记住此功能仅在IE11及以上版本（）上受支持，这可能是您的问题所在
.txt {
    padding-left: 12px;
    padding-right: 12px;
}

.txt {
    padding-left: 0;
    padding-right: 0;
}