Chrome中的文本对齐中心（Webkit）

Blix 发表于 Dev

布利克斯

知道为什么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>

Zeeshan Siddiqui

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

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

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

资料来源：

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。