0

サイズが流動的な記事の中にいくつかのコンテンツがあります。基本的にはdisplay:table、親要素に適用してから、中央に配置display:table-cellしvertical-align:middleたい要素に適用しました。しかし、私の問題は、親記事の 100% の高さの中央に配置したい要素を作成できず、どうすればこれを達成できるのか疑問に思っていたことです。

jsfiddle で例を作成しました: http://jsfiddle.net/f29Mr/

そして、これがサンプルCSSです

.m-level-block {
    width: 91.66667%;
    float: left;
    margin-right: 0%;
    display: inline;
    margin-left: 4.16667%;
    margin-right: 95.83333%;
    background: black;
    margin-bottom: 10px;
}
.m-level-block .m-video-thumb {
    width: 18.18182%;
    float: left;
    margin-right: 0%;
    display: inline;
}
.m-video-thumb .video-stats-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.m-level-block .level-content {
    width: 81.81818%;
    float: right;
    margin-right: 0;
    display: inline;
    position: relative;
    display: table;
    height: 100%;
}
.m-level-block .level-content .level-info {
    padding: 2%;
    width: 55.55556%;
    display: table-cell;
    vertical-align: middle;
    max-height: 400px;
    height: 100%;
}
4

1 に答える 1

0

ここで行ったことはより単純ですが、これがどのように機能するかを簡単に確認できます。

デモhttp://jsfiddle.net/f29Mr/3/

HTML

<div class="article">
    <div class="image">a</div>
    <div class="text">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</div>
    <div class="stats">HELLO</div>
</div>

CSS

body, html {
    width: 100%;
    height: 100%;
}

.article {
    width: 90%;
    height: 20%;
    margin: 0 auto;
    border: 1px solid #666;
    display:table;
}

.article .image {
    width: 20%;
    height: 100%;
    background: #F00;
    display: table-cell;
}

.article .text {
    width: 60%;
    height: 100%;
    display: table-cell;
    vertical-align:middle;
}

.article .stats {
    height: 20%;
    width: 19%;
    display:inline-block;
    vertical-align:middle;
    display: table-cell;
}

上記を適用したコンテンツへのリンク: http://jsfiddle.net/f29Mr/4/

于 2013-01-30T13:25:15.870 に答える