水平对齐Tworesponsive图像

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; 
}