Question

我想在跨度中居中对齐文本。为什么它只适用于Chrome，但没有IE？

＆＃13;

.txt {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.0980392);
  background-image: none;
  border-bottom-color: rgba(0, 0, 0, 0.117647);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-collapse: collapse;
  border-image-outset: 0px;
  border-image-repeat: stretch;
  border-image-slice: 100%;
  border-image-source: none;
  border-image-width: 1;
  border-left-color: rgba(0, 0, 0, 0.117647);
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: rgba(0, 0, 0, 0.117647);
  border-right-style: solid;
  border-right-width: 1px;
  border-top-color: rgba(0, 0, 0, 0.117647);
  border-top-style: solid;
  border-top-width: 1px;
  box-shadow: none;
  box-sizing: border-box;
  color: rgb(0, 0, 0);
  cursor: default;
  display: flex;
  fill: rgb(0, 0, 0);
  float: left;
  font-family: MetricWeb-Medium, arial;
  font-size: 16px;
  height: 48px;
  justify-content: center;
  line-height: 16px;
  margin-bottom: 1.54688px;
  margin-left: 1.54688px;
  margin-right: 1.54688px;
  margin-top: 1.54688px;
  outline-color: rgb(0, 0, 0);
  outline-style: none;
  outline-width: 0px;
  padding-bottom: 6px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 6px;
  text-align: center;
  white-space: nowrap;
  width: 35.875px;
  -webkit-user-select: none;
}

＆＃13;

<span class="txt">2016</span>

＆＃13;

https://jsfiddle.net/ramseyfeng/fd5sxv27/

Answer 1

我修改了你的jsfiddle;

您使用font-size选择的填充不能使用font-size。 Padding-Left导致偏离左侧的偏心。此外，您的盒子太小，不适合16磅的字体大小。

Jsfiddle Change ver5 - 一起删除填充，保持相同的字体大小，并将宽度增加到70px。

Jsfiddle更改版本6 - 将字体大小从16减少到12px，左右填充从6px减少到3px＆amp; 12像素。

https://jsfiddle.net/fd5sxv27/5/

.txt {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.0980392);
    background-image: none;
    border-bottom-color: rgba(0, 0, 0, 0.117647);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-collapse: collapse;
    border-image-outset: 0px;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: rgba(0, 0, 0, 0.117647);
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: rgba(0, 0, 0, 0.117647);
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: rgba(0, 0, 0, 0.117647);
    border-top-style: solid;
    border-top-width: 1px;
    box-shadow: none;
    box-sizing: border-box;
    color: rgb(0, 0, 0);
    cursor: default;
    display: flex;
    fill: rgb(0, 0, 0);
    float: left;
    font-family: MetricWeb-Medium, arial;
    font-size: 16px;
    height: 48px;
    justify-content: center;
    line-height: 16px;
    margin-bottom: 1.54688px;
    margin-left: 1.54688px;
    margin-right: 1.54688px;
    margin-top: 1.54688px;
    outline-color: rgb(0, 0, 0);
    outline-style: none;
    outline-width: 0px;
    text-align: center;
    white-space: nowrap;
    width: 70px;
    -webkit-user-select: none;
}

https://jsfiddle.net/fd5sxv27/6/

.txt {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.0980392);
    background-image: none;
    border-bottom-color: rgba(0, 0, 0, 0.117647);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-collapse: collapse;
    border-image-outset: 0px;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: rgba(0, 0, 0, 0.117647);
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: rgba(0, 0, 0, 0.117647);
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: rgba(0, 0, 0, 0.117647);
    border-top-style: solid;
    border-top-width: 1px;
    box-shadow: none;
    box-sizing: border-box;
    color: rgb(0, 0, 0);
    cursor: default;
    display: flex;
    fill: rgb(0, 0, 0);
    float: left;
    font-family: MetricWeb-Medium, arial;
    font-size: 12px;
    height: 48px;
    justify-content: center;
    line-height: 16px;
    margin-bottom: 1.54688px;
    margin-left: 1.54688px;
    margin-right: 1.54688px;
    margin-top: 1.54688px;
    outline-color: rgb(0, 0, 0);
    outline-style: none;
    outline-width: 0px;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 12px;
    padding-top: 6px;
    text-align: center;
    white-space: nowrap;
    width: 35.875px;
    -webkit-user-select: none;
}

Answer 2

问题在于每个浏览器呈现左右padding的方式。

在您的代码中，您有：

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

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

但IE11尊重填充：

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

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

Revised Fiddle

文本不在Internet Explorer的

2 个答案: