css - 调整页脚中的图像边距

Question

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

图片应该恰好位于页脚的中间。哪个类反射(reflect)了它？

CODEPEN 演示: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 -->

我想调整页脚中间的 share-shayri.jpg 图像。

更新

注意:在页眉中我也有一张图片。我不想将 STLye 更改为页脚以影响页眉。

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

这应该使它水平和垂直居中