CODEWITHSUNDEEP
csstwitter-bootstrap
SB2055
SB2055

Reputation: 12852

How to get text centering horizontally and vertically?

I've tried to use the display:table method of centering vertically, but I can't quite get it working. My work so far is here:

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

I'm trying to center that text vertically and horizontally. I think it's a little tougher than normal because I'm using bootstrap spans, but maybe not. Any tips would be awesome!

Code: 

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

Upvotes: 1

Views: 88

Answers (1)

000
000

Reputation: 27227

side-study-box's display:table is being reverted back to display:block. Add an important flag. display:table !important.

Upvotes: 1

Related Questions