Vertical centering of a div with multiple contents (img and wrapping text)

I would like to display little boxes listed in a div. Every box has a fixed width and height, and inside they have an img and some text (the images are like icons, they're the same width and height). The icons are quite large compared to the text next to them, so I would like to position them vertically centered.

Now, my code looks like this:

<div class="hbutton">
    <div class="hwrap">
        <img style="vertical-align:middle; float:left;" height="40" src="icon.png" width="40" />
        <span>Some very long text displayed in the box.</span>
    </div>
</div>

For centering the hwrap div, I used this trick. No other divs, no others settings.

The centering itself works fine, but if I put a long text near the img, and it doesn't fit, the text starts wrapping, but the second line start under the image, instead of under the first line.

What I WANT to see:

What I see instead:

I've also tried putting the text into a div and changing the attributes around, but I just can't make it work开发者_运维知识库. Any ideas?

---

This isn't necessarily easy, but the following seems to achieve your aims (bear in mind that I changed the text-element from span to p, for personal/semantic reasons):

html:

<div class="hbutton">
    <div class="hwrap">
        <img height="40" src="icon.png" width="40" />
        <p>Some very long text displayed in the box.</p>
    </div>
</div>

css:

.hbutton {
    width: 50%;
    margin: 0 auto 1em auto;
}

.hwrap {
    position: relative;
    /* the following is just for aesthetic reasons, amend to taste */
    border: 1px solid #ccc; 
    border-radius: 1em;
    padding: 0.5em;
}

p {
    margin: 0 0 0 50px;
}

img {
    position: absolute;
    top: 50%;
    left: 0.5em; /* adjust to taste, this is just for aesthetic reasons */
    margin-top: -20px;
    height: 40px;
    width: 40px;
}

JS Fiddle demo.

---

Edit:

<div class="hbutton">
    <div class="hwrap">
        <img style="vertical-align:middle; float:left;" height="40" src="icon.png" width="40" />
        <span>Some very long text displayed in the box.</span>
    </div>
</div>

Using the same mark up, I would add the following CSS properties:

.hwrap {
    position : relative; // any type of positioning will work, but one must be declared
}
.hwrap span {
    position : absolute;
    margin-left : 50px // {icon width} + 10px for padding
}

This way, the span itself never has a reason to be that far over... you can add whatever other positioning you need for it to display to your taste--but you should get the idea.

Edit: I just noticed that this approach is almost identical to David Thomas' approach. +1.

---

I've found the perfect soution for the problem under this link.

It does the vertical centering with both single and multiline text properly without any workaround, and without the exponential number of divs!