Горизонтально выровнять двухрежимные изображения

Question

Все еще изучая отзывчивый веб-дизайн и сталкиваясь с препятствиями.

Есть ли способ сделать эти два связанных изображения горизонтально выровненными, а не быть друг на друга, сохраняя при этом отзывчивость? В принципе, мне нужно, чтобы эти изображения были горизонтально на одной линии, все еще будучи отзывчивыми.

Было бы лучше иметь два тега div для каждого изображения? Или два изображения в одном div? Я не уверен.

Вы можете видеть, что я делаю с jsfiddle.

#header { 
padding-top: 1%; 
padding-bottom: .5%; 
background-color: white; 
} 
#header img { 
display: block; 
margin-left: auto; 
margin-right: auto; 
height: 20%; 
width: 20%; 
} 

Answer 1

Вот скрипку: https://jsfiddle.net/odw3vru8/8/

Добавить:

#header { 
    /* If you want to center align the images horizontally */ 
    text-align:center 
} 

#header img { 
    display: inline-block; 
    vertical-align:middle; 
}