為什么這個文本不是垂直/水平居中？

Question

我試圖將這個文本水平和垂直居中，理想情況是基於百分比（響應性）。 我無法弄清楚為什么這不起作用。

小提琴： http ： //jsfiddle.net/PTSkR/144/

碼：

<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;
}

Answer 1

您可以使用display：table，例如：

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

請查看演示 。 你可以使用display：inline-block，例如：

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

請查看演示 。

還有其他方法，請點擊此處和此處 。

Answer 2

如果你想只居中line-height: 160px你可以在.card-box .card-box-controls-container上使用line-height: 160px .card-box .card-box-controls-container 。

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

Answer 3

沒有簡單的方法來垂直對齊html或css中的內容更多信息@

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