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
Post a Comment