Why isn't this text centering vertically / horizontally?

Question

I'm trying to center this text horizontally and vertically, ideally based on percentages (for responsive-ness). I can't figure out why this isn't working.

Fiddle: http://jsfiddle.net/PTSkR/144/

Code:

<div class="row-fluid card-box">
        <div class="span2 card-box-controls-container">
            <div class="card-box-controls">
                <a >edit</a>
                <a >delete</a>
            </div>
        </div>
</div>

.card-box .card-box-controls-container {
    height: 160px;
    vertical-align: middle;
    display: inline-block;
    text-align: center;
    color: black;
    font-size: 14px !important;

}
.card-box .card-box-controls-container .card-box-controls {
    vertical-align: middle;
    display: inline-block;
    text-align: center;
    color: black;
    font-size: 14px;

}
    .card-box .card-box-controls a {
        cursor: pointer !important;
        color: gray;
        text-decoration: none;
        margin: 0;
        vertical-align: middle;
        font-size: 14px;
    }

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

Similar questions have been asked on Stack Overflow many times before. [This search query](https://www.google.com/#sclient=psy-ab&q=html+center+text+vertically+and+horizontally&oq=html+center+text+vertically+and+&gs_l=serp.3.0.0j0i22i30l9.85674.89921.1.91015.24.18.2.4.5.0.146.1691.12j6.18.0...0.0.0..1c.1.16.serp.sOdvDs0Dmcc&psj=1&bav=on.2,or.r_cp.r_qf.&fp=9bad86cff449a01c&biw=1366&bih=630) may be relevant to your question. — Anderson Green, Jun 09 '13 at 00:48
Also, [this question](http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally) might be a duplicate of your question, depending on what you're trying to do here. — Anderson Green, Jun 09 '13 at 00:51
I don't completely understand the question. Which part of the alignment should be based on percentages? — Anderson Green, Jun 09 '13 at 01:07

score 2 · Accepted Answer · answered Jun 09 '13 at 01:06

You can use display:table, for example:

.card-box .card-box-controls-container {
    height: 160px;
    vertical-align: middle;
    display:table;
    text-align: center;
    color: black;
    font-size: 14px !important;
    width: 100%;

}
.card-box .card-box-controls-container .card-box-controls {
    vertical-align: middle;
    display: table-cell;
    text-align: center;
    color: black;
    font-size: 14px;

}
    .card-box .card-box-controls a {
        cursor: pointer !important;
        color: gray;
        text-decoration: none;
        margin: 0;
        vertical-align: middle;
        font-size: 14px;
    }

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

pls view the demo. and you can use display:inline-block, for example:

.card-box .card-box-controls-container {
    height: 160px;
    text-align: center;
    color: black;
    font-size: 14px !important;

}
.card-box .card-box-controls-container:after{
    content:"";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 0px;
    background: red;
}
.card-box .card-box-controls-container .card-box-controls {
    vertical-align: middle;
    display: inline-block;
    text-align: center;
    color: black;
    font-size: 14px;
    position: relative;
}

.card-box .card-box-controls a {
     cursor: pointer !important;
     color: gray;
     text-decoration: none;
     margin: 0;
     vertical-align: middle;
     font-size: 14px;
}

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

pls view the demo.

There are other ways, pls click here and here.

Thank you Airen! I had no idea :after could be used like that. — SB2055, Jun 09 '13 at 01:09
and you can use the display: flex. it is very easy. I think you will like it. — Airen, Jun 09 '13 at 01:12

score 1 · Answer 2 · answered Jun 09 '13 at 01:01

1

You can use line-height: 160px on .card-box .card-box-controls-container if you want to center only one line.

http://jsfiddle.net/PTSkR/146/

answered Jun 09 '13 at 01:01

Nikola R.

1,173
6
23

score -1 · Answer 3 · answered Jun 09 '13 at 00:51

-1

There's no easy way to vertically align content in html or css more info @

http://blog.themeforest.net/tutorials/vertical-centering-with-css/

answered Jun 09 '13 at 00:51

Carl Wilson

189
1
11

there is a way... but nothing that does not smack of hack. – Bosworth99 Jun 09 '13 at 00:59

Why isn't this text centering vertically / horizontally?

3 Answers3