CODEWITHSUNDEEP
cssgoogle-chrome
Blix
Blix

Reputation: 289

Text Align Center in Chrome (webkit)

Any idea why text-align: center doesn't center the text within the table cells? But text-align: -webkit-center does?

The reason why display: table-cell is applied is to have vertical-align to work. Removing it is not a solution and doesn't answer my question.

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

Upvotes: 2

Views: 5481

Answers (1)

Zeeshan S.
Zeeshan S.

Reputation: 2091

The issue isn't with display: table-cell but the nature of the span element.

Please note that the text-align property in CSS is used for aligning the inner content of block-level elements.

The HTML span tag is an inline-level element. Hence, it doesn't apply by default to inline-level elements and therefore you have to use browser-specific CSS i.e. text-align: -webkit-center.

Sources:

CSS Tricks Almanac - https://css-tricks.com/almanac/properties/t/text-align/

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

Upvotes: 1

Related Questions