带有图像的复选框列表

Question

我有垂直居中检查符号的问题。默认情况下，它位于左下角。

这是我的复选框列表的样子：

这就是我想要的样子：

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

当然，您可以使用像素来根据需要进行调整。