Question

我正试图让我的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;
}

Answer 1

尝试将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>

垂直对齐不适用于li

1 个答案: