html - display: inline block and vertically centred -

i have 3 divs , want them display beside each other , centred. goes image, 1px divider text. want them vertically centred compared ones beside them.

html

    <div class="sub-logo-wrap">         <div class="sub-logo"><img src="..." width="auto" height="30px" /></div>                     <div class="divider"></div>         <div class="sub-logo-text"><p>text ... can more 1 line ... </p></div>     </div> 

css

.sub-logo-wrap > div {    display: inline-block;  }  .divider {    width: 1px;   height: 20px; }  .sub-logo-text {    width: 150px;  } 

the problem when text goes more 1 line centering of text no longer works

that can done easily.

.sub-logo-wrap > div {     display: inline-block;     vertical-align: middle; } 

jsfiddle demo

also add if need accuracy.

.sub-logo img {     display: block; } 

or

.sub-logo img {     vertical-align: top; }