如何讓文字居中水平和垂直？

Question

我試過使用垂直居中的display：table方法，但我無法完全理解它的工作原理。我的工作至今是在這裏：

http://jsfiddle.net/PTSkR/11/

我想垂直和水平居中的文本。我認爲這比正常情況稍強一些，因爲我使用的是引導跨度，但也許不是。任何提示都會很棒！

代碼：

.side-study-box { 
    background-color: white; 
    color: black; 
    border: 3px solid #0072A6; 
    text-align: center; 
    height: 220px; 
    margin-left: 10px; 
    display: table; 
    padding: 10px; 
    -webkit-box-shadow: 3px 3px 3px #888888; 
    -moz-box-shadow: 3px 3px 3px #888888; 
    box-shadow: 3px 3px 3px #888888; 
} 

.side-study-box span { 
    position: relative; 
    width: 100%; 
    font-size: 24px; 
    display: table-cell; 
    vertical-align: middle; 
    } 

.card-box { 
    background-color: #f5f5f5; 
    color: black; 
    margin-right: 0px; 
    margin-bottom: 15px; 
    margin-top: 15px; 
    padding: 5px 0 5px 0; 
} 

<div data-bind="visible: !editing()" class="row-fluid card-box"> 
    <div class="span2 card-details-box"> 
    </div> 
    <div class="span5 side-study-box"> 
     <span>TEST</span> 
    </div> 
    <div class="span5 side-study-box"> 
     <span>TEST</span> 
    </div> 
</div> 

Answer 1

side-study-box的display:table正在恢復到display:block。添加important標誌。 display:table !important。