html - 将 div 居中并在顶部和底部自动扩展的问题

Question

我有一个小问题，我希望内部 div 位于其外部 div 的中心，如果添加了更多文本，我还希望在顶部和底部展开，而不是像显示那样仅向下展开。我用红色突出显示了我希望 div 在图像上的位置以及我希望它如何展开。

提前致谢!

HTML

<div class="postlefttoright"><!--start of post-->

        <div class="featuredimageblog"><img src="http://www.lorempixel.com/534/371" /></div>

        <div class="featuredexcon">

            <div class="featuredexconinner">

                <div class="featuredexcontent">

                It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

                </div>

            </div>

        </div>

    </div><!--end of post-->

CSS

.postlefttoright {
    position: relative;
    float:left;
    width: 1067px;
    height:371px;
    margin-bottom:53px;
}

.featuredimageblog {
    position: relative;
    float:left;
    width: 534px;
    height:371px;}

.featuredexcon {
    position: relative;
    float:left;
    width: 533px;
    height:371px;}  

.featuredexconinner {
    position: relative;
    margin:0 auto;
    width: 407px;
    height:371px;}      

.featuredexcontent {
    position: absolute;
    top:50%;
    width: 407px;
    height:171px;}      

Answer 1

对此的快速修复是添加一个 display: table 及其对应的 display:table-cell，它最终将与 vertical-align 一起使用:中间。为此，您需要取出以下代码:

.featuredexconinner {
position: relative;
margin:0 auto;
background:gray;
width: 407px;
height:auto;
} 

只是因为您不需要在一个 div 中有一个 div(div-ception)。相反，您只需要以下代码:

.featuredexcon {
    display:table;
    position: relative;
    float:left;
    width: 533px;
    height:371px;
}
.featuredexcontent {
    display:table-cell;
    vertical-align:middle;    
    width: 407px;
    height:auto;
}

这应该会修复您的代码，假设您已经从我说要删除的部分中删除了适当的 HTML。也请注意，position:absolute 与 top:50% 的混合会移动您的 div，并且会阻止您由于绝对定位而垂直对齐 div。

DEMO