div内にdivとimageを垂直に整列させる

Question

<div class="outside" style="width: 500px; height: 20px; border: 1px solid red;"> 
    <img src="" style="width: 10px; height: 20px; margin: 0; padding: 0; display: inline-block;"> 
    <div id="here" style="display: inline-block; height: 15px; border: 1px solid blue; font-size: 7px;">11</div> 
</div> 

理由を教えてもらうために#hereにテキストを追加すると、imgと#hereの一番下の行が見つかりませんでした。 外側に#hereとimg verticallセンターを作る方法（imgと＃は同じ行にあります）

Answer 1

vertical-alignはあなたが探しているものです。

.outside > * { 
 
    vertical-align: middle; 
 
}

<div class="outside" style="width: 500px; height: 20px; border: 1px solid red;"> 
 
    <img src="http://www.fillmurray.com/20/10" style="width: 10px; height: 20px; margin: 0; padding: 0; display: inline-block;"> 
 
    <div id="here" style="display: inline-block; height: 15px; border: 1px solid blue; font-size: 7px;">11</div> 
 
</div>

Answer 2

あなたは水平方向の中心でそれをしたいですか？

#ImageCtr { 
 
    width: 10px; 
 
    height: 20px; 
 
    
 
} 
 
#outer { 
 
    width: 500px; 
 
    height: 20px; 
 
    background-color: #FF0000; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div id="outer"> 
 
    <div id="ImageCtr"><img src="http://i.imgur.com/vCVDBHB.png"> 
 
    </div> 
 
</div>