Board Thread:Support Requests - Getting Technical/@comment-15636815-20151107220151/@comment-1757994-20151108130035

The reason the top-alignment of text happens is that only the bounding box of the contents of any table cell are vertically centered. The bounding box of the contents of your table cell contains both the left-justified text and the right-floated image, so they're vertically aligned together. That means there is no CSS-only solution, no matter how you re-write the contents.

There are a few options, none of them particularly pretty.


 * 1) Use JavaScript to look for td elements that contain .floatright elements.
 * td
 * set inline width to the calculated width
 * set (inline or class) position to relative
 * Firefox prior to version 37 (and maybe other browsers) ignores relative position on td elements. I know Chrome and IE are okay with relative positioning of td elements. FWIW, the W3C spec says the effect of relative positioning on table elements is undefined, so Mozilla chose undefined = not implemented for a long time.
 * wrap the td contents in a new div
 * set inline height to the calculated height of the td
 * set (inline or class) display to table-cell
 * set (inline or class) vertical-align to middle
 * a .floatright div contains the image
 * set inline position to absolute, removing the image from the flow and allowing the text to be centered vertically
 * set inline top to half of (height of cell) - (height of image), centers the image vertically
 * set (inline or class) right to 0, keeps the image right-aligned in the cell
 * 1) Same as above, but use two new divs, one taking the place of the td, so it works in all browsers
 * 2) Use flex-boxes, but I believe using them still involves JavaScript to compute flex-box postions based on the dimensions of the image and text and to re-write the cell contents. Internet Explorer prior to version 11 does not support flex-boxes, not even with vendor prefixes.
 * 3) Use a template that either creates a table within the table cell or creates two columns for the existing table, putting the image in a new column. You'd have to pass the word that keys the image into the template as a separate parameter. You'd also have to create an empty column manually when there isn't an image. Something like  and then:
 * or
 * , but not all on one line

Those are the solutions I see. I think all of them would work in Chrome, so they'd probably work in Safari. I don't know about Opera. The Firefox and IE exceptions noted should be the only ones.

Rewriting the rli template doesn't involve JavaScript, works in all browsers, but requires more typing to make the table. I'd say go with that.