TinyMCE Image Alignment Examples

Aligning images in TinyMCE works best if you move make sure that the image is inserted after the text that surrounds it.

Example 1: The image is inserted immediately after the text.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl. In dignissim lacus ut ante. Cras elit lectus, bibendum a, adipiscing vitae, commodo et, dui. Ut tincidunt tortor. Donec nonummy, enim in lacinia pulvinar, velit tellus scelerisque augue, ac posuere libero urna eget neque. Cras ipsum. Vestibulum pretium, lectus nec venenatis volutpat, purus lectus ultrices risus, a condimentum risus mi et quam. Pellentesque auctor fringilla neque. Duis eu massa ut lorem iaculis vestibulum. Maecenas facilisis elit sed justo. Quisque volutpat malesuada velit. NLM Logo

Notice how the image does not flow properly.

The code is ... Quisque volutpat malesuada velit.<img style="float: right;" src="/web/documentation/images/nlmlogo2.gif" alt="NLM Logo" /></p>

Example 2: One hard return is placed after the text and before the image is inserted.

NLM Logo

The code is .... volutpat malesuada velit.</p><p><img style="float: right;" src="/web/documentation/images/nlmlogo2.gif" alt="NLM Logo" /></p>

Last Reviewed: October 9, 2018

NLM Main Site Coding Examples

Example 1: The image is inserted immediately after the text.

Example 2: One hard return is placed after the text and before the image is inserted.