如何中心：在一個div後？

Question

我目前正在研究一個項目，其中我使用了一些div和:after僞元素。我希望能夠將div中的:after文本居中。有人能幫我在這裏嗎？問題

例子：http://jsfiddle.net/JohnFish/7ra5t/

Answer 1

我想你只需要在你的CSS添加text-align: center：

.example { 
    background: black; 
    height: 250px; 
    width: 500px; 
    text-align: center 
} 
.example:after { 
    content: "+"; 
    color: white; 
    font-size: 100px; 
} 

如果你也想垂直對齊方式：

.example { 
    background: black; 
    height: 250px; 
    width: 500px; 
    text-align: center; 
    display: table-cell; 
    vertical-align: middle; 
} 
.example:after { 
    content: "+"; 
    color: white; 
    font-size: 100px; 
} 

Answer 2

另一種方式做到這一點：

.example { ... position: relative; } 
.example:after { ... 
    position: absolute; 
    top: 50%; margin-top: -{50% of the element's height}; 
    left: 50%; margin-left: -{50% of the element's width}; 
}