垂直對齊浮動圖像+容器（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; 
} 

你可能還需要將溢出設置爲隱藏在容器上，以便由於浮動而保持高度。