並排圖片和文字：如何垂直居中文本

Question

遇到問題與此：

<div class="outer"> 
    <h4>My Guide</h4> 

    <div class="inner four-columns"> 
     <img src="{{ 'guide3.jpg' | asset_url }}" class="img-responsive" /> 
    </div> 

    <div class=" inner four columns"> 
     <p>Content.</p> 
    </div> 

</div> 

有沒有一種簡單的方法來垂直對齊，而無需使用表的文本內容？

Answer 1

它不必是表，但類似的東西是更加靈活，特別是如果你也想讓它負責後：

由容器包裝的HTML：

<div class="container"> 
    <div class="inner"> 
     <img src="{{ 'guide3.jpg' | asset_url }}" class="img-responsive" /> 
    </div> 
    <div class=" inner"> 
     <p>Content.</p> 
    </div> 
</div> 

和這個CSS應用到它：

.container { 
    display: table; 
} 
.inner { 
    display: table-cell; 
    vertival-align: middle; 
} 

對於較小的屏幕，你可以（將所有這些以display: block;在媒體查詢，如果你想要）。

Answer 2

集所有兒童的顯示.container裏面的DIV阻止，就像這樣：

.outer > .inner { display: block; }