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

1 回答 1

0

尝试将该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>
于 2013-10-01T23:00:21.623 回答