Как выровнять изображение по вертикали

Question

Как выровнять изображение по вертикали

0

Я пытаюсь вертикально выравнивать изображение в теге li.

У меня есть что-то вроде этого.

<nav id='tabs-wrapper'>
  <ul id='tabs'>
    <li><a href='index.html'><img id='btn' src='images/home.png'/></a></li><img class='vert'              
         src='images/vert2.png'/>
    <li><a href='#'>Project</a></li><img class='vert' src='images/vert2.png'/>
    <li><a href='test2.html'>Test</a></li><img class='vert' src='images/vert2.png'/>
    <li><a href='#'>contact</a></li><img class='vert' src='images/vert2.png'/>
  </ul>

CSS

nav #tabs{
float: left;
height: 46px;
}

nav #tabs .vert{
    vertical-align: middle;
}

nav #tabs li{
    display: inline-block;
    height: 42px;
    padding-right:15px;
    padding-left:15px;
}

#tabs li:hover{
    border-bottom:1px solid blue;
    line-height:30px;
}

#tabs li a{
   margin: 0 10px;
   line-height: 48px;
   vertical-align: middle;
}

#btn{
line-height: 48px;
vertical-align: middle;
}

По какой-то причине первое li (содержащее изображение) не может показаться вертикальным по отношению к середине (остальное li отлично работает).

Может ли кто-нибудь мне помочь?

Благодарю.

FlyingCat 17 дек. 2013, в 21:11

Источник

0

Вы не можете иметь случайные изображения вне тегов <li> . Это не правильная разметка. Все должно быть внутри тегов <li> .
Scott 17 дек. 2013, в 19:50

Теги:

html

css

1 ответ

Ещё вопросы

Вы не можете иметь случайные изображения вне тегов <li> . Это не правильная разметка. Все должно быть внутри тегов <li> .

Diodeus - James MacFarlane · Accepted Answer · 2013-12-17T18-41-00.000Z

В списке unorderd все, что находится за пределами <li> является недопустимым HTML (как показано в ### ниже).

<li><a href='index.html'><img id='btn' src='images/home.png'/></a></li>###<img class='vert'              
         src='images/vert2.png'/>###

Если это изображение является частью пользовательского интерфейса, оно принадлежит как фон CSS, а не встроенное изображение.

Использование:

#tabs a {
     display:block;
     background:url(images/vert2.png);
     background-repeat:no-repeat;
     background-position:0px 0px;
     padding-left:30px; 
}

Отрегулируйте положение и положение фона в соответствии с вашим расположением.