如何填充跨度的底部文本以与复选框图像对齐？

debugcn 发表于 Dev

科比·杜克

我正在尝试一个非常简单的设计，但仍然找不到解决方案。

我想制作一个基于图像的设计复选框。问题是，使用这种技术，我无法使用输入的value属性在复选框旁边显示文本。

所以，我尝试在它<span>旁边放置一个，但文本与底部对齐。我尝试通过各种属性填充它的底部，但没有成功。

如何填充<span>'s 文本以与复选框'图像垂直对齐？我不想将这两个元素与另一个<div>将它们显示为表格的元素一起包装。

到目前为止，这是我尝试的一个片段：

.chkchk {
    display:none;
}
 
.chkchk + label {
    background-image:url(http://i.imgur.com/RnoKxPS.png);
    height: 22px;
    width: 35px;
    display:inline-block;
    padding: 0 0 0 0px;
    cursor:pointer;
}
.chkboxText {
    padding-bottom:10px;
    display:inline-block;
}

<input class="chkchk" type="checkbox" name="thing" value="valuable" id="thing" />
<label for="thing"></label>
<span class="chkboxText">dasdasdas</span>

Duannx

只需使用vertical-align: middle. 希望能帮助到你。

.chkchk {
  display: none;
}

.chkchk+label {
  background-image: url(http://i.imgur.com/RnoKxPS.png);
  height: 22px;
  width: 35px;
  display: inline-block;
  padding: 0 0 0 0px;
  cursor: pointer;
  vertical-align: middle
}

.chkboxText {
  padding-bottom: 10px;
  display: inline-block;
}

<input class="chkchk" type="checkbox" name="thing" value="valuable" id="thing" />
<label for="thing"></label>
<span class="chkboxText">dasdasdas</span>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。