дисплей: встроенный блок и вертикально центрированный

Question

У меня есть три div, и я хочу, чтобы они отображались рядом друг с другом и центрировались. Это изображение, 1px делитель, затем текст. Я хочу, чтобы они были вертикально центрированы по сравнению с теми, что были рядом с ними.

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 be more than one line ... </p></div> 
    </div> 

CSS

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

.divider { 
    width: 1px; 
    height: 20px; 
} 

.sub-logo-text { 
    width: 150px; 
} 

проблема, когда текст идет в более чем одной строке центрирование текста больше не работает

Answer 1

Это можно сделать легко.

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

JSFIDDLE DEMO

добавить Также это, если вам нужна дополнительная точность.

.sub-logo img { 
    display: block; 
} 

Или

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

Answer 2

Попробуйте с:

.sub-logo-wrap > div { 
    display: inline-block; 
    vertical-align: top; 
} 
.sub-logo-text { 
    line-height: 30px; /* Image height */ 
    width: 150px; 
} 

Вы также можете использовать flexbox:

.sub-logo-wrap { 
display: flex; 
flex-direction: row; 
align-items: center; 
align-content: center; 
} 
.sub-logo-wrap > div { 
/* No need to add display: inline-block */ 
}