Как получить центрирование текста по горизонтали и по вертикали?

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 «s display:table в настоящее время вернулись к display:block. Добавьте флаг important. display:table !important.