垂直对齐浮动图像+容器（H + P）

Question

我想中心的浮动图像和容器（段落+标题）：

.row { 
 
    display: block; 
 
    /* width: 100%; */ 
 
} 
 
.left { 
 
    float: left; 
 
} 
 
.right { 
 
    float: right; 
 
}

<div class="row"> 
 
    <div class="container"> 
 
    <img class="right" src="" width="300" height="300" /> 
 
    <h1>Heading</h1> 
 

 
    <p>Lorem ipsum dolor sit amet</p> 
 
    <div style="clear: both"></div> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="container"> 
 
    <img class="left" src="" width="300" height="156" /> 
 
    <h1>Heading</h1> 
 

 
    <p>Lorem ipsum dolor sit amet</p> 
 
    <div style="clear: both"></div> 
 
    </div> 
 
</div>

这里也是一个live version of the problem。我清除了花车，但现在我无法居中.img和.container元素。你会如何解决这个问题？

Answer 1

因为浮动元素不服从垂直对齐，所以你没有运气。您可以使用display: table-cell以及vertical-align: middle，这可以很好地工作。尽管您需要稍微修改HTML结构，才能将内容放置在图像之前，反之亦然，具体取决于您希望内容和图像在前端显示的方式。

.container { 
 
    display: table; 
 
} 
 
.content { 
 
    width: 50%; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.image { 
 
    width: 50%; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.image img { 
 
    width: 100%; 
 
}

<div class="row"> 
 
    <div class="container"> 
 
    <div class="content"> 
 
     <h1>Heading</h1> 
 
     <p>Lorem ipsum dolor sit amet</p> 
 
    </div> 
 
    <div class="image"> 
 
     <img src="http://dev.dashbox.si/media/wysiwyg/vsebina-dashboxa.jpg" /> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="container"> 
 
    <div class="image"> 
 
     <img src="http://dev.dashbox.si/media/wysiwyg/vsebina-dashboxa.jpg" /> 
 
    </div> 
 
    <div class="content"> 
 
     <h1>Heading</h1> 
 
     <p>Lorem ipsum dolor sit amet</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

你可以做垂直对齐文本基本上是什么改变容器的显示表，然后该段表单元格，然后将垂直对齐到中间看起来像这样：

.row { 
    display: table; 
    overflow: hidden; 
} 
.left, .right { 
    display: table-cell; 
    vertical-align: middle; 
} 

你可能还需要将溢出设置为隐藏在容器上，以便由于浮动而保持高度。