Впечатление изображения в нижнем колонтитуле

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

Примечание: в заголовке и у меня есть одно изображение. Я не хочу менять stlye в нижний колонтитул, который будет затронут в заголовке.

Answer 1

Вы можете обернуть изображение в набор из двух дивы:

<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

Ваш КСС бит перепутался, чтобы изучить ... плюс ... ссылка ссылки 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> 

это будет решить вашу проблему!