Vertical text aligning in custom checkbox implementation

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.

Answer 1

I tried like this http://jsfiddle.net/StartStep/79T6d/2/

SEE ON JSFIDDLE http://jsfiddle.net/StartStep/79T6d/2/