为什么图片没有跟着居中？

给父级banner加了居中 text-align:center
子级内的文字都居中了，为什么图片logo没有居中？而是偏左啊？
在图片下面再写一个图片，第二张图片会跟着居中，但第一个还是偏左，为什么啊？

【我写的代码】

.banner{ height:980px; width:100%; background:#cf4646; text-align:center;}
.banner .logo{ margin-top:60px;}
.banner p{ font-size:22px; color:#fff; font-weight:100; margin:10px auto 40px;}
.banner .btn{ font-size:18px; color:#eee; border:2px solid #eee; padding:10px 15px;}
.banner .btn:hover{ color:#fff; border-color:#fff;}



<div class="banner">
    <img src="images/gulp_logo.jpg" class="logo"/>
    <img src="images/gulp_logo.jpg" class="logo"/>
    <p>用自动化构建工具增强你的工作流程！</p>
        <a href="#" class="btn">开始使用</a>
</div>



【效果】

潜意式

代码中为何有两个图像标签，添加了两张图片呢？