How do you vertically center text with an image in a div element?

Question

I am trying to make a small segment where I have an image on the left side with text vertically centered to the right of the image. For the second image below, I want the image on the right, and the text vertically centered to the left of the image.

<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>

That is the html portion of it, but I cannot figure a way to style it with css.

Answer 1

I would recomend using display:table and display:table-cell which is the mostly supported layout in almost all browsers

<style>
#Branching {display: table;}
#Branching .RightCenteredText{
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}
#Branching .LeftBoundPic {display: table-cell;}
#ContentHubs {display: table;}
#ContentHubs .LeftCenteredText{
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}
#ContentHubs .RightBoundPic {display: table-cell;}
</style>
<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 id="Branching">
    <section class=LeftBoundPic>
        <h4>Discussion Branching</h4>
        <img src="SomePhoto.png" alt="FigTree"/>
    </section>
    <span class="RightCenteredText">
    Bunch of text <br> 
    that should be next to the image.
    </span>
  </div>

  <div id="ContentHubs">
    <span class="LeftCenteredText">
        More text that should <br>
        be on the left of the photo now.
    </span>
    <section class=RightBoundPic>
        <h4>Content Hub</h4>
        <img src="SomePhoto.png" alt="FigTree"/>
    </section>
  </div>
</div>

Atleast we can use this until all browsers started supporting css3 flex and flex box layout

Answer 2

Make that image your background of a div and inside that div this css suggested from howtocenterincss.com or you can search for your other queries at same.

This css is compatible down to IE8

Answer 3

.div-table{
 display:table-cell;
    border:1px solid BLACK;
}

.div-cell{
    display:table-cell;
    padding:5px;
    vertical-align:middle;
}

.div-row{
    display:table-row;
    vertical-align:middle;
}

<div class='div-table'>
   <div class='table-row'>
      <div class='div-cell'>
         <h4>Discussion Branching</h4>
      </div>    
   </div>
   <div class='table-row'>
      <div class='div-cell'>
         <img src="SomePhoto.png" alt="FigTree"/>
      </div>
      <div class='div-cell'>
         <span> Bunch of text that should be next to the image. <br> More text and yet more and more.<br> Even more text text. </span>
      </div>
   </div>    
</div>

<br>

<div class='div-table'>
   <div class='table-row'>
      <div class='div-cell'>
         <h4>Discussion Branching</h4>
      </div>    
   </div>
   <div class='table-row'>
      <div class='div-cell'>
         <span> Bunch of text that should be next to the image. </span>
      </div>
      <div class='div-cell'>
         <img src="SomePhoto.png" alt="FigTree"/>
      </div>
   </div>    
</div>

Answer 4

If you don't need to support IE9, flexbox is the perfect fit for this situation (it's very well supported now).

#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;
}

Answer 5

<section class='TextBox RightBoundPic'>
    <h4>Content Hub</h4>
    <img src="SomePhoto.png" alt="FigTree"/>
</section>

.TextBox > h4, .TextBox > img { display: inline-block; }
.TextBox > img { vertical-align: middle; }