在页脚中添加图片边距

Question

在页脚中我保留了一张图片。但我无法调整它的顶部和底部边距。

图像应该在页脚的正中间。哪个班反映了它？

CODEPEN DEMO：Demo

<div class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav">  
        <li><a href="#" class="navbar-brand scroll-top"><img class="img-brand" src="http://shayariwallpapers.files.wordpress.com/2013/03/sher-shayari.jpg" height="25" width="20"></img></a></li> 
        <li class="active"><a href="#">What is facebook?</a></li> 
        <li><a href="#about">How does it work?</a></li> 
        <li><a href="#contact">Feedback</a></li> 
        <li><a href="#contact">Contact us</a></li>        
       </ul> 
      </div><!--/.nav-collapse --> 

我想在页脚的中间调整共享shayri.jpg图像。

UPDATE

注：在头部还我有一个形象。我不希望改变页脚成为页脚受到影响。

Answer 1

你可以换图像一组两个div内：

<li> 
    <div id="wrapper"> 
     <div align="center" id="wrapper-inner"> 
      <a href="#" class="navbar-brand scroll-top"> 
       <img class="img-brand" src="http://shayariwallpapers.files.wordpress.com/2013/03/sher-shayari.jpg" height="25" width="20"></img> 
      </a> 
     </div> 
    </div> 
</li> 

，并设置CSS：

#wrapper 
{ 
    display:table; 
    width:100%; 
    height:100%; 
} 

#wrapper-inner 
{ 
    display:table-cell; 
    width:100%; 
    height:100%; 
    vertical-align: middle; 
} 

这应该居中水平和verticaly

Answer 2

你的CSS是bit搞砸了研究...加...参考链接url没有回答，仍然：

因为，你的形象在里面a标签，其overflow:hidden设置的地方...识别它，然后在你的CSS

a.my_custom_a{ 
     display:inline-block; 
     border:1px solid red; 
     vertical-align: middle; /*key*/ 
    } 

添加此为标记

<a href="#" class="navbar-brand scroll-top my_custom_a"> 
    <img class="img-brand" src="http://shayariwallpapers.files.wordpress.com/2013/03/sher-shayari.jpg" height="25" width="20"></img> 
    </a> 

这将解决您的问题！