带有图像的复选框列表答案

【问题标题】：Checkbox list with Image带有图像的复选框列表
【发布时间】：2014-06-13 21:40:27
【问题描述】：

我在垂直居中检查符号时遇到问题。默认位于左下角。

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

这就是我想要的样子：

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

【问题讨论】：

请贴出你的代码。
尝试为复选框设置行高等于图像高度并给出垂直对齐：中间；如果你可以在你的代码中使用 css
@Kiran，感谢您的回复。但是，我尝试了这个，但没有运气！ .chkboxlist { line-height: 43px; vertical-align:middle; }

标签： css asp.net checkbox checkboxlist

【解决方案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;
    }

当然，您可以根据需要调整像素。

【讨论】：

不明白你的意思。你能解释一下吗？
人们在搜索问题时会寻找具有公认答案的问题。如果您将答案标记为已接受，它将帮助未来的搜索者找到他们问题的答案。我认为，您将能够在 8 小时后将您的答案标记为已接受。