vertical centering nested content in a div

[onebitrocket]

Here is my example with the issue: http://codepen.io/onebitrocket/full/FulsL

The top:-50px will not initially apply on the .featureText span. It only seems to work when I turn the property off and then on in fire bug. Strangely, ie7 renders this correctly.

Has anyone else come across this issue?

Thanks

[Paulie_D]

To start with, why are you using spans and positioning there, that seems counter-productive?

[Paulie_D]

I think a more standard structure might suit: http://codepen.io/Paulie-D/pen/zjsmn

[onebitrocket]

I’m using that markup for a specific reason as part of a larger project. There is some js which refers to all child divs, they then inherit the styles forced by that js.

Thanks for your restructure, but it still has the same issue with vertically centering the featureText container with in the hight of the feature div regardless of the content within the featureText container.

Did you check the page with firebug? Toggling off and on the top:-50% property fixes it in browser, but doesn’t explain while its not taking it into account when the page is loaded. I’ve check through the styles and I can’t see any inherency issues.

[Paulie_D]

The top:-50px will not initially apply on the .featureText span.

BTW…in the Codepen it’s given as -50% not px.

Could that be it?

[onebitrocket]

Ah. No I did mean -50%.

Is that a standard issue that causes the value not to initially apply on loading?
If so i’ll need find a fix some how.

I did use display:table/table-row/table-cell and vertical-align:middle, which works perfectly on modern browsers

[Paulie_D]

I did use display:table/table-row/table-cell and vertical-align:middle, which works perfectly on modern browsers

I’d go with that if for no other reason than it works without using any magic numbers.

[Author]

Posts