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

Question

So i have a bootstrap row with text content on the left in a div spanning 4 cols and my image on the right in another div spanning 8 cols. Now, in the tablet based view i need my image to be in the exact center of it's container with respect to the text on it's left(New text may be added so the center alignment of the image with respect to the text should be dynamic)

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>

For CSS: What I've done now is hard coded a value to ensure it is centering to the text wrt the p tag above but when i add new Lorem Ipsum text it's not centered. What i need is dynamic centering of the image as and when text in the p tag changes.

CSS:

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

Answer 1

transform will not help you you need to remove float: left and try to add

display: inline-block;
vertical: middle;