垂直對齊旁邊的文字響應圖像中的每個.COL-MD-*

Question

嘗試了兩種方法來實現旁邊響應圖像中的每個單獨的.COL-MD-*

子元素垂直對齊文本

.vcenter { 
    min-height: 400px; 
display: table-cell; 
vertical-align: middle; 
border: 1px solid red; 
float: none; 
} 

和使用表細胞的方法

.parent { 
    display: table; 
} 

.child { 
    display: table-cell; 
    vertical-align: middle; 
} 

但作爲左圖像的父子響應我會得到怎樣沒有一個固定的高度工作。

小提琴：https://jsfiddle.net/silko/jr3b8kL5/13/

Answer 1

只需添加line-height: 400px;您.child類就會使文本垂直居中。

說明：您可以使用calc和vw和vh使其更加靈活，例如， line-height: calc(30vw + 30vh);

.vcenter { 
 
    min-height: 400px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    border: 1px solid red; 
 
    float: none; 
 
} 
 

 
.parent { 
 
    display: table; 
 
} 
 

 
.child { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
p{ 
 
    display: table-cell; 
 
    height: 400px; 
 
    vertical-align: middle; 
 
}

<div class="col-sm-6"> 
 
    <picture><img src="http://placehold.it/400x400" class="ccm-image-block img-responsive bID-214"></picture> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
    <div class="parent"> 
 
     <div class="ccm-custom-style-main49 child"> 
 
     <p>vertical center text when more than one lineihfoiwvowiWOiehfiwhfpwHFPwofhpofhpfhpifhhvciuvcivuwcviwucvwicuwvcwiucvcwuicvwicvwicuwvcwicuvwicuvwicvwciuwcviwcuwv</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

更新：如果您的文本包含多行，那麼你應該在文本容器的display屬性設置爲table-cell，然後你可以設置vertical-align: middle。