html - 如何让我的图像相对于左侧的动态 div 在中心垂直对齐？

Question

所以我有一个 bootstrap 行，文本内容在左侧的 div 中跨越 4 列，而我的图像在右侧的另一个 div 中跨越 8 列。现在，在基于平板电脑的 View 中，我需要我的图像相对于其左侧的文本位于其容器的确切中心(可能会添加新文本，因此图像相对于文本的中心对齐应该是动态的)

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:我现在所做的是硬编码一个值，以确保它以上面的 p 标记的文本为中心，但是当我添加新的 Lorem Ipsum 文本时，它没有居中。我需要的是在 p 标签中的文本发生变化时动态居中图像。

CSS:

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

Answer 1

transform 对你没有帮助，你需要删除 float: left 并尝试添加

display: inline-block;vertical: middle;