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

我想在页脚中间调整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;
}

这应该以水平和垂直为中心

Answer 2

你的css有点搞砸了......加上......参考链接网址没有回答，仍然是：

因为，您的图片位于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>

这可以解决你的问题！

调整页脚中的图像边距

2 个答案: