帶圖像的複選框列表

Question

我在垂直居中檢查符號時遇到問題。默認情況下，它位於左下角。

這是我的CheckBoxList什麼樣子：

，這是我多麼希望它看起來像：

<asp:CheckBoxList ID="FoodCheckBoxList" runat="server" RepeatColumns="3" RepeatDirection="Horizontal"> 
     <asp:ListItem> <img src="../images/foods/Food1.png" /> </asp:ListItem> 
     <asp:ListItem> <img src="../images/foods/Food2.png" /> </asp:ListItem> 
     <asp:ListItem> <img src="../images/foods/Food3.png" /> </asp:ListItem> 
     <asp:ListItem> <img src="../images/foods/Food4.png" /> </asp:ListItem> 
     <asp:ListItem> <img src="../images/foods/Food5.png" /> </asp:ListItem> 
     <asp:ListItem> <img src="../images/foods/Food6.png" /> </asp:ListItem> 
     <asp:ListItem> <img src="../images/foods/Food7.png" /> </asp:ListItem> 
     <asp:ListItem> <img src="../images/foods/Food8.png" /> </asp:ListItem> 
     <asp:ListItem> <img src="../images/foods/Food9.png" /> </asp:ListItem> 
</asp:CheckBoxList> 

Answer 1

一些研究，我這個解決方案結束後：

html

<asp:CheckBoxList ID="FoodCheckBoxList" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" ClientIDMode="Static"> 
     <asp:ListItem> <img src="" style="width:128px;height:128px;background:blue" /> </asp:ListItem> 
     <asp:ListItem> <img src="" style="width:128px;height:128px;background:blue" /> </asp:ListItem> 
     <asp:ListItem> <img src="" style="width:128px;height:128px;background:blue" /> </asp:ListItem> 
     <asp:ListItem> <img src="" style="width:128px;height:128px;background:blue" /> </asp:ListItem> 
     <asp:ListItem> <img src="" style="width:128px;height:128px;background:blue" /> </asp:ListItem> 
     <asp:ListItem> <img src="" style="width:128px;height:128px;background:blue" /> </asp:ListItem> 
     <asp:ListItem> <img src="" style="width:128px;height:128px;background:blue" /> </asp:ListItem> 
     <asp:ListItem> <img src="" style="width:128px;height:128px;background:blue" /> </asp:ListItem> 
</asp:CheckBoxList> 

不要責怪我的內聯風格只是使用它而不是圖像。

CSS

#FoodCheckBoxList [type="checkbox"] { 
    margin: 0; 
    vertical-align: middle; 
    position: relative; 
    top: 70px; 
    } 

    label { 
    display: block; 
    padding-left: 35px; 
    text-indent: -20px; 
    } 

當然你也可以用像素髮揮它調整到您的需求。