Question

I have a Span tag containing a IMG tag and another Span tag.
I would like the inner Span tag to be aligned to the left and the IMG tag to be centrally aligned plus I want both the tags to be vertically aligned in the middle, and I can’t seem to get this right…

This is how it looks (It’s blue because the outer Span tag is marked in FireBug to show that it’s stretching the entire surface):

As you can see in the image, both tags are centred and they are also aligned in the top of the container, I don’t want either of this.

This is the markup:

This is the current CSS of the tags:

.v-button-wrap {
    height: 100%;
    display: block;
    padding: 6px 15px 0 9px;
    vertical-align: middle;
    line-height: normal;
    text-align: center;
}

.v-icon {
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    line-height: normal;
    text-align: center;
}

.v-button-caption {
    text-align: left;
    line-height: normal;
    vertical-align: middle;
}

I left out the CSS that isn’t relevant for my problem, colors, font-specs and such. Needless to say I’m no ace at CSS. And I’ve looked up several guides covering the problem, but I’ve only managed to find examples where the entire content of a div is centered, and that’s not what I want.

Does anyone with good CSS knowledge see the problem in my code? Or have another solution to solve my problem..?

Thanks!

EDIT: Here’s a screen shot of the entire layout due to request. Sorry I have to blur some things… but they are in either case not important. =)

EDIT2: I did manage to solve my problem using the following CSS:

.v-button-details-panel-header .v-button-wrap {
    height: 100%;
    text-align: inherit;
    padding: 0px;
}

.v-button-details-panel-header .v-button-wrap .v-button-caption {
    display: table-cell;
    position: relative;
    text-align: left;
}

.v-button-details-panel-header .v-button-wrap .v-icon {
    display: table-cell;
    position: relative;
    top: 12px;
    margin-left: auto;
    margin-right: auto;
}

I’m sure the advice dgvid proposed would have been good for a static layout. But since the panels and horizontally stretched buttons move depending on expansion and collapsing that wasn’t a fitting solution.

Answer 1

You might need to set the CSS display property of both your img and span.v_button_caption to inline-block.

See also this article: Understanding vertical-align, or “How (Not) To Vertically Center Content”

As for another technique to achieve the desired result: If you know the height of the container element and you know the height of the element to be centered (and unfortunately from the CSS you’ve posted, it does not appear that you do), then you could

1. Give the container element CSS property `position: relative’
2. Give the element-to-be-centered CSS property position: absolute
3. Set the CSS top property of the element-to-be-centered to (containerHeight / 2) – (centeredEltHeight / 2).