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

Question

我正在尝试一种非常简单的设计，但仍无法找到解决方案。

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

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

如何填充<span>的文字以与复选框'图像垂直对齐？我不想用另一个<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>

Answer 1

添加包装器，然后添加display:flex;。我还重新订购html以匹配图片

.wrapper{
 display:flex;
}

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

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

Answer 2

将vertical-align: middle;添加到label

.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 {
    display:inline-block;
}

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

Answer 3

只需使用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>

Answer 4

将position:relative和bottom提供给.chkboxText

.chkboxText {
    position: relative;
    bottom: 5px;//you can change this
    display:inline-block;
}

Answer 5

您可以使用vertical-align和padding

.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 {
    display:inline-block;
    vertical-align: middle;
    padding-bottom: 1em;
    
    position: relative;
}

.chkboxText:before {
  content: '';
  background: red;
  height: 1px;
  width: 50px;
  left: -50px;
  top: 10px;
  position: absolute;
}

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

Answer 6

这是你需要的吗？

＆＃13;

＆＃13;

.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; */
    
}
.fl-bx {
    display:flex;
    align-items:center;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;