Question

My JQuery UI vertical slide doesn’t work in Firefox because of the display:table-cell used on .label for vertically centering the text.

See: JSFiddle

How can I fix in Firefox yet retain the vertical centering?

Answer 1

Simply make a div outside the label and animate the div instead:

HTML:

<div id="labels">
    <div>
    <p class="label" data-groupl="1">Vertically centered text</p>
    </div>
</div>

jQuery:

$(".label").parent().show("slide", { direction: "right" }, 1000);