如何讓我的圖像在中間垂直對齊左側的動態div？

因此，我有一個引導行左側的文本內容跨越4列的div和我的圖像在另一個跨越8列的div的圖像。現在，在基於平板電腦的視圖中，我需要我的圖像位於其容器的確切中心位置（可能會添加新文本，因此圖像的中心對齊方式應該是動態的）如何讓我的圖像在中間垂直對齊左側的動態div？

HTML: 
<div class="row"> 
     <div class="col-sm-8 col-sm-push-4 tab_image"> 
      <img src="images/event/event-banner-v3.jpg" alt=""> 

     </div>  
     <div class="col-sm-4 col-sm-pull-8 col-xs-12"> 
      <p>This year's Bank of Scotland Great Scottish Run, will see thousands of runners to the streets of Glasgow on Sunday 4 October.<br><Br>Join us at the biggest running event in Scotland and soak up the atmosphere provided by thousands supporters lining the streets, music and bands on the run, charity cheering points..</p>   
     </div> 
</div>

對於CSS：我現在所做的是硬編碼的值，以確保它爲中心，以文本WRT p標籤上面，但是當我添加新Lorem存有文本它不居中。我需要的是當p標籤中的文字發生變化時圖像的動態居中。

CSS：

@media (min-width: 768px) and (max-width: 991px){ 
    .tab_image { 
     position: relative; 
     transform: translateX(17%); 
     transform: translateY(17%); 
    }

來源

2016-02-05 Ajitesh Chhatani

爲什麼你'transform'財產的兩倍？我也會欣賞一個jsFiddle演示，並可能想要的效果圖像 – Aziz

變換不會幫你，你需要刪除浮動：左，並嘗試添加

display: inline-block; 
vertical: middle;

來源

2016-02-05 07:52:23

如何讓我的圖像在中間垂直對齊左側的動態div？

回答

相關問題