make div и изображение вертикально выровнять внутри div

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> 

Я нашел нижнюю строку img и #here не в строке, если я добавлю текст в #here, кто может сказать мне, почему. И как сделать центр #here и img verticall снаружи (img и #here в той же строке)

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>