I tried like this http://jsfiddle.net/StartStep/79T6d/2/
SEE ON JSFIDDLE http://jsfiddle.net/StartStep/79T6d/2/
Question
While implementing custom checkbox I came across the problem of vertical aligning one-line and two-lines text next to the image which imitates checkbox with one css style.
See the described situation in this image.
I have played a lot with vertical-aling
, display: inline-block
and line-height
, the solutions occured to work separetely only for one-line text or only for two and more lines text. In the end I figured out that the behavior can be reached by display: table
and display: table-cell
. But I'the sample onnot happy with this solution.
Is there any other way to reach the same behavior?
Here is the sample html to play with:
<div class="block">
<label class="checkbox">
<input class="input" type="checkbox">
<span class="image"></span>
<span class="text">Some text</span>
</label>
</div>
<div class="block">
<label class="checkbox">
<input class="input" type="checkbox">
<span class="image"></span>
<span class="text">Some very very very <br> very very very long text</span>
</label>
</div>
And here is the display: table-cell
style solution:
.block {
margin-top: 10px
}
.checkbox {
display: table;
}
.checkbox .input {
display: none;
}
.image {
background: red;
width: 35px;
height: 35px;
display: table-cell;
vertical-align: middle;
}
.text {
display: table-cell;
vertical-align: middle;
padding-left: 10px;
}
See the same on fiddler.
La solution
I tried like this http://jsfiddle.net/StartStep/79T6d/2/
SEE ON JSFIDDLE http://jsfiddle.net/StartStep/79T6d/2/