css - Chrome 中的文本居中对齐(webkit)

Question

知道为什么 text-align: center 没有将表格单元格中的文本居中吗？但是 text-align: -webkit-center 可以吗？

之所以应用display: table-cell是为了让vertical-align起作用。删除它不是解决方案，也不能回答我的问题。

.wrapper {
    text-align: center;
}
.column {
    width: 33%;
    display: inline-block;
    text-align: center;
    /*text-align: -webkit-center;*/
    border: 1px solid gray;
    float: left;
}
span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    background-color: gray;
    border-radius: 25px;
}
span:before {
    content: "text"
}

<div class="wrapper">
    <div class="column">
        <span></span>        
    </div>
    <div class="column">
        <span></span>        
    </div>
    <div class="column">
        <span></span>        
    </div>
</div>

Answer 1

问题不在于 display: table-cell 而在于 span 元素的性质。

请注意，CSS 中的 text-align 属性用于对齐 block 级元素的内部内容。

HTML span 标签是行内元素。因此，默认情况下它不适用于内联级元素，因此您必须使用特定于浏览器的 CSS，即 text-align: -webkit-center。

来源:

CSS 技巧年鉴 - https://css-tricks.com/almanac/properties/t/text-align/

W3Schools - http://www.w3schools.com/html/html_blocks.asp