0
私は最初に高さが分からないdivを持っています。それは2人の子供を持っています - 左に<img>と、<div>は、いくつかの内容を含んでいます。イメージのサイズは固定されています（50×50など）。ただし、コンテンツのサイズは任意です。 1行であっても、写真と比べてサイズが小さくなります。いずれにせよ、親ディビジョンはどちらが大きければ大きいかを見極め、両者に対応するように垂直に成長させ、両者が適切に中央に位置するようにしなければなりません（垂直パディング5pxを考慮）。イメージを動的テキストと垂直に整列する
コンテンツがイメージの下にラップされない、つまり、右側のスタンドアロン要素（つまり、フローティングのように）であるとします。
つまり、コンテンツが1行だけである場合、親divの高さは50 + 5 * 2 = 60pxで、左側のimgは5pxの中央に、右側のコンテンツは左から5pxのマージンを想定します）。これはここでは縦一列になっています。
コンテンツのサイズが100pxほど大きいとしたら、親のdivは100 + 5 * 2 = 110pxになります。 imgは左から30pxの上から表示されます。
誰でも問題を解決できますか？
これは私が思いついたものです：https://jsfiddle.net/fj77eobe/
.elem-option {
text-align: left;
white-space: nowrap;
width: 300px;
background: pink;
}
/* The ghost, nudged to maintain perfect centering */
.elem-option:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
/* The element to be centered, can also be of any width and height */
.elem-photo {
display: inline-block;
vertical-align: middle;
width: 40px;
height: 40px;
margin-left: 10px;
}
.elem-content {
display: inline-block;
margin-left: 5px;
width: 100px;
word-wrap: break-word;
overflow: none;
}<div class='elem-option'>
<img src="https://img.zmtcdn.com/data/reviews_photos/b22/28f633be81fd340785c3af7f7858cb22_1463913069.jpg" class="elem-photo" />
<div class='elem-content'>
Amader ekhane ekjon er heavy khar chhilo...take paedo bole khepano hoto..toh se ajkal ei defense deyAmader ekhane ekjon er heavy khar chhilo...take paedo bole khepano hoto..toh se ajkal ei defense deyAmader ekhane ekjon er heavy khar chhilo...take paedo
bole khepano hoto..toh se ajkal ei defense deyAmader ekhane ekjon er heavy khar chhilo...take paedo bole khepano hoto..toh se ajkal ei defense dey
</div>
</div>