如何让我的图像在中间垂直对齐左侧的动态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？

回答

相关问题