html - vertical-align only one inline block element -

i have 3 inline block elements, image , 2 pieces of text. modify class image such middle aligned while other 2 text blocks remain top aligned. seems work if set .subimg have vertical-align:top; , .subsection have vertical-align:middle; not the other way around. why , how fix it? thanks

here's code:

demo

html

<div id="about">     <div class="section">             <img class="subimg" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/nikon-d810-image-sample-6.jpg" alt="image">             <div class="subsection">                 <h2>blah</h2>                 <hr>                 <p>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br></p>             </div>             <div class="subsection">                 <h2>blah</h2>                 <hr>                 <p> blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>                 </p>             </div>         </div> </div> 

css

.section{     width: 100%;     text-align: center;     background-color:#fdfdfd;  }  .subsection{     vertical-align: top;     margin: 20px;     text-align: left;     display: inline-block;     max-width: 20%; }  .subimg{     vertical-align: middle;     margin: 20px;     text-align: left;     display: inline-block;     max-width: 20%; } 

jsfiddle-link

the vertical-align property in css controls how elements set next each other on line lined up.

add div (vmid) vertical align middle div , image middle aligned , inside vmid put vertical aligned top element.

html

<div id="about">   <div class="section">     <img class="subimg" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/nikon-d810-image-sample-6.jpg" alt="image">     <div class="vmid">       <div class="subsection">         <h2>blah</h2>         <hr>         <p> blah           <br>blah           <br>blah           <br>blah           <br>blah           <br>blah           <br>         </p>       </div>       <div class="subsection">         <h2>blah</h2>         <hr>         <p> blah           <br>blah           <br>blah           <br>blah           <br>blah           <br>blah           <br>blah           <br>         </p>       </div>     </div>   </div> </div> 

css

.section {   width: 100%;   text-align: center;   background-color: #fdfdfd; }  .subsection {   vertical-align: top;   margin: 20px;   text-align: left;   display: inline-block;   max-width: 20%; }  .subimg {   vertical-align: middle;   margin: 20px;   text-align: left;   display: inline-block;   max-width: 20%; }  .vmid {   display: inline-block;   vertical-align: middle; }