concerned about over-using table-cell to vertical-align

[mmcgu1966]

I find that I’m using DISPLAY: TABLE-CELL, VERTICAL-ALIGN: MIDDLE on spans, within a div set to DISPLAY: TABLE more and more to vertical-align text. While this works fine and flex-boxes aren’t ready for legacy-browser use yet, will I regret it down the line?
On a side note, is flex-box ready to use in general, with legacy browser fallback? Or is it still less hassle to just use older layout choices.

[Shikkediel]

Still using transforms for it myself (IE9+)…

.parent {
position: relative;
}

.text {
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

http://caniuse.com/#feat=transforms2d

[Paulie_D]

The beautiful thing about Flexbox is that, other than position absolutely, it overrides the other display properties.

So if table-cell is working for you, use that AND flexbox. Best of both worlds.

[Author]

Posts