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

1 行だけを中央揃えにする場合はline-height: 160pxonを使用できます。.card-box .card-box-controls-container

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

于 2013-06-09T01:01:41.910 に答える