Question

知道text-align: center为什么不将表格单元格中的文本居中？但是text-align: -webkit-center呢？

应用display: table-cell的原因是让vertical-align起作用。删除它不是一个解决方案，并没有回答我的问题。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

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

文字在Chrome中对齐中心（webkit）

1 个答案: