垂直對齊無法在li上工作

我正嘗試讓我的li元素在中間對齊 - 垂直。垂直對齊無法在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; 
}

來源

2013-10-01 jojo

嘗試將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-01 23:00:21

垂直對齊無法在li上工作

回答

相關問題