javascript - 如何在 div 元素中将带有图像的文本垂直居中？

Question

我正在尝试制作一个小片段，其中我在左侧有一个图像，文本在图像右侧垂直居中。对于下面的第二张图片，我想要右边的图片，而文本在图片的左边垂直居中。

<div id="Segment2">
    <h2>Fig Tree is a discussion tool that helps organizations innovate</h2>
    <h3>We took the basics of a discussion thread and added...</h3>

    <div style="height:259px;" id="Branching">
        <section class=LeftBoundPic>
            <h4>Discussion Branching</h4>
            <img src="SomePhoto.png" alt="FigTree"/>
        </section>
        <span>
        Bunch of text <br> 
        that should be next to the image.
        </span>
    </div>

    <div style="height: 259px; margin-top: 50px;" id="ContentHubs">
        <section class=RightBoundPic>
            <h4>Content Hub</h4>
            <img src="SomePhoto.png" alt="FigTree"/>
        </section>
        <span>
            More text that should <br>
            be on the left of the photo now.
        </span>
    </div>
</div>

那是它的 html 部分，但我想不出用 css 设置样式的方法。

Answer 1

如果不需要支持IE9，flexbox非常适合这种情况(现在很 well supported)。

#Branching, #ContentHubs {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
}

.RightBoundPic {
  -webkit-order: 1;
  order: 1;
}