Koby Douek Koby Douek - 11 months ago 43
CSS Question

How to pad a span's bottom text to align with a checkbox image?

I'm trying a pretty trivial design but still can't find a solution.

I want to make an image based design checkbox. The problem is that using this technique, I cannot use the input's

value
property to display text next to the checkbox.

So, I tried placing a
<span>
next to it, but the text is aligned to the bottom. I tried padding its bottom through various properties but with no success.

enter image description here

How can I pad the
<span>
's text to vertically align with the checkbox' image? I prefer not to wrap both elements with another
<div>
which will display them as a table.

Here's a snippet of my attempt so far:



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

Just use vertical-align: middle. Hope it helps.

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download