Question

我试图将这个文本水平和垂直居中，理想情况是基于百分比（响应性）。我无法弄清楚为什么这不起作用。

代码：

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

请查看demo。你可以使用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;
}

请查看demo。

还有其他方法，请点击here和here。

Answer 2

如果您只想居中一行，则可以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/

为什么这个文本不是垂直/水平居中？

3 个答案: