Вертикальное выравнивание не работает на ли

Question

Вертикальное выравнивание не работает на ли

0

Я пытаюсь выравнивать элемент li в середине - вертикально.

Но похоже, что vertical-align не работает. Есть идеи?

HTML

<body>
   <div class="toolbar">
      <ul>
         <li>
            <input type="radio" value="one" name="try" />
            <img src="try1_30X30.png"/>
            hello
         </li>
         <li>
            <input type="radio" value="two" name="try" />
            <img src="try2_30X30.png"/>
            world
         </li>
      </ul>
   </div>
</body>

CSS

.toolbar ul {
    list-style-type: none;
    height: 50px;
}

.toolbar ul li {
    float: left;
    display: block;
    line-height: 50px;
    padding-left: 10px;
    vertical-align: middle;
}

jojo 02 окт. 2013, в 01:40

Источник

Теги:

html

css

html5

vertical-alignment

1 ответ

Ещё вопросы

Denison Luz · Accepted Answer · 2013-10-01T20-23-00.000Z

Попробуйте применить свойство vertical-align к самому тегу img.

Пожалуйста, смотрите код ниже или рабочий пример здесь (http://jsbin.com/oxoMeCo/1/)

 <html>
  <head>
    <style type="text/css">
    .toolbar ul {
        list-style-type: none;
        height: 50px;
    }
    .toolbar ul li
    {
        float: left;
        display: block;
        line-height: 50px;
        padding-left: 10px;
    }

    .toolbar ul li img {
        vertical-align:middle;

    }
    </style>
  </head>
  <body>
    <div class="toolbar">
     <ul>
        <li>
            <input type="radio" value="one" name="try" />
            <img src="http://placehold.it/30x30">
            hello
        </li>
        <li>
            <input type="radio" value="two" name="try" />
            <img src="http://placehold.it/30x30">
            world
        </li>
    </ul>
    </div>
 </body>
 </html>