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


i trying make small segment have image on left side text vertically centered right of image. second image below, want image on right, , text vertically centered left of image.

<div id="segment2">     <h2>fig tree discussion tool helps organizations innovate</h2>     <h3>we took basics of discussion thread , 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>          should next 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 should <br>             on left of photo now.         </span>     </div> </div> 

that html portion of it, cannot figure way style css.

if don't need support ie9, flexbox perfect fit situation (it's 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; } 

Comments

Popular posts from this blog

facebook - android ACTION_SEND to share with specific application only -

python - Creating a new virtualenv gives a permissions error -

javascript - cocos2d-js draw circle not instantly -