Illustrating Image Alignment

Viewing the source code will also show you the style that was created for each selection. The main ones I use are float left and right. I would NOT leave the style name as style1, style2, etc. I would change whichever ones I was using to something that means something and I could then apply it whenever needed.

Default alignment - Baseline Alignment

Sample image graphic to illustrate alignment. Default. The element is placed on the baseline of the parent element. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas ultricies vestibulum elit. Donec nunc nisi, interdum vitae, rhoncus eu, blandit in, diam. Phasellus mollis purus vitae sem. Nulla facilisi. Mauris dictum risus vel nulla rhoncus dapibus. Nullam interdum erat quis lacus. Cras quam eros, ultricies sit amet, porta non, pretium ut, arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sollicitudin. Vestibulum volutpat. Cras velit. Pellentesque semper egestas urna. Mauris nec pede. Integer magna. Proin viverra lectus ut turpis. Sed mauris.

Sub Alignment

Sample image graphic to illustrate alignment. Aligns the element as it was subscript. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas ultricies vestibulum elit. Donec nunc nisi, interdum vitae, rhoncus eu, blandit in, diam. Phasellus mollis purus vitae sem. Nulla facilisi. Mauris dictum risus vel nulla rhoncus dapibus. Nullam interdum erat quis lacus. Cras quam eros, ultricies sit amet, porta non, pretium ut, arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sollicitudin. Vestibulum volutpat. Cras velit. Pellentesque semper egestas urna. Mauris nec pede. Integer magna. Proin viverra lectus ut turpis. Sed mauris.

Super Alignment

Sample image graphic to illustrate alignment. Aligns the element as it was superscript. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas ultricies vestibulum elit. Donec nunc nisi, interdum vitae, rhoncus eu, blandit in, diam. Phasellus mollis purus vitae sem. Nulla facilisi. Mauris dictum risus vel nulla rhoncus dapibus. Nullam interdum erat quis lacus. Cras quam eros, ultricies sit amet, porta non, pretium ut, arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sollicitudin. Vestibulum volutpat. Cras velit. Pellentesque semper egestas urna. Mauris nec pede. Integer magna. Proin viverra lectus ut turpis. Sed mauris.

Top Alignment

Sample image graphic to illustrate alignment. The top of the element is aligned with the top of the tallest element on the line. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas ultricies vestibulum elit. Donec nunc nisi, interdum vitae, rhoncus eu, blandit in, diam. Phasellus mollis purus vitae sem. Nulla facilisi. Mauris dictum risus vel nulla rhoncus dapibus. Nullam interdum erat quis lacus. Cras quam eros, ultricies sit amet, porta non, pretium ut, arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sollicitudin. Vestibulum volutpat. Cras velit. Pellentesque semper egestas urna. Mauris nec pede. Integer magna. Proin viverra lectus ut turpis. Sed mauris.

Text Top Alignment

Sample image graphic to illustrate alignment. The top of the element is aligned with the top of the parent element's font. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas ultricies vestibulum elit. Donec nunc nisi, interdum vitae, rhoncus eu, blandit in, diam. Phasellus mollis purus vitae sem. Nulla facilisi. Mauris dictum risus vel nulla rhoncus dapibus. Nullam interdum erat quis lacus. Cras quam eros, ultricies sit amet, porta non, pretium ut, arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sollicitudin. Vestibulum volutpat. Cras velit. Pellentesque semper egestas urna. Mauris nec pede. Integer magna. Proin viverra lectus ut turpis. Sed mauris.

Float Left

Sample image graphic to illustrate alignment. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas ultricies vestibulum elit. Donec nunc nisi, interdum vitae, rhoncus eu, blandit in, diam. Phasellus mollis purus vitae sem. Nulla facilisi. Mauris dictum risus vel nulla rhoncus dapibus. Nullam interdum erat quis lacus. Cras quam eros, ultricies sit amet, porta non, pretium ut, arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sollicitudin. Vestibulum volutpat. Cras velit. Pellentesque semper egestas urna. Mauris nec pede. Integer magna. Proin viverra lectus ut turpis. Sed mauris.