0

我正在尝试将文本水平和垂直居中，理想情况下基于百分比（用于响应性）。我不知道为什么这不起作用。

小提琴：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;
}
4

3 回答 3

2

您可以使用 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;
}

请查看演示。

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

于 2013-06-09T01:06:07.343 回答
1

如果您只想将一条线居中，则可以使用line-height: 160pxon 。.card-box .card-box-controls-container

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

于 2013-06-09T01:01:41.910 回答
-1

没有简单的方法可以垂直对齐 html 或 css 中的内容更多信息@

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

于 2013-06-09T00:51:59.370 回答