テキストがInternet Explorerのスパンでセンタリングされない

Question

スパン内のテキストを中央揃えにしたいとします。なぜそれはChromeでのみ動作しますが、IEでは動作しません。

.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; 
 
}

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

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

Answer 1

問題は、各ブラウザが左右paddingをレンダリングする方法です。あなたが持っているあなたのコードで

：

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

小さなコンテナ内のテキストを中心としたときにクロムは基本的にこのパディングを無視します：

をしかし、IE11は、パディングを尊重：

ソリューション単に水平パディング削除することです：

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

Revised Fiddle

Answer 2

私はあなたのjsfiddleの改正を行いました。

あなたのフォントサイズは、あなたがfont-sizeで選択したパッドでは機能しません。 Padding-Leftは、左から中心ずれを引き起こしていました。また、あなたの箱は、16ptのフォントサイズでは小さすぎます。

変更点ver5 - 同じフォントサイズと幅を70pxに保ったまま、すべてのパディングを削除しました。

変更点ver6 - フォントサイズを16から12pxに、左右を6pxから12px12pxに3pxに縮小しました。

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; 
}