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 回答