Images Alignment
Learn how to align images to center, float images on left or right.
URL Fragments
URL fragment ID is used to align images, which #center, #float-start and #float-end represents align center, float start (left) and float end (right) respectively.
Aligning Images to Center
Adding the #center fragment ID for aligning images to the center.
Floating Images to Start (Left)
Adding the #float-start fragment ID for floating images to the start (left). You may need to clear to avoid breaking your layout, for Bootstrap users, you could wrap the content inside the bs/clearfix shortcode.
1{{% bs/clearfix %}}
2 In suscipit orci risus, vitae varius mauris dapibus id. Fusce feugiat at ligula at tristique. Suspendisse dui urna, dignissim et hendrerit sit amet, finibus ut metus. Mauris ac turpis in nibh tempor luctus at sed est. Donec in pellentesque lectus. Quisque sit amet aliquam ipsum, sit amet scelerisque felis. Donec convallis turpis mauris, eu tristique sapien cursus quis. Cras tempus massa ut tempor semper. Nam feugiat varius arcu, vel accumsan dui suscipit sollicitudin. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam vel est sed mauris tincidunt consequat quis at enim. Pellentesque sed tincidunt sem.
3
4Vivamus lobortis consequat ultricies. Suspendisse finibus mi vel quam suscipit interdum. Nam in enim mollis neque feugiat congue at et metus. Pellentesque mi ex, faucibus ut dapibus id, interdum sed sem. Proin pellentesque et sapien nec iaculis. Suspendisse consequat metus sit amet consectetur ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
5{{% /bs/clearfix %}}
Vivamus lobortis consequat ultricies. Suspendisse finibus mi vel quam suscipit interdum. Nam in enim mollis neque feugiat congue at et metus. Pellentesque mi ex, faucibus ut dapibus id, interdum sed sem. Proin pellentesque et sapien nec iaculis. Suspendisse consequat metus sit amet consectetur ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Floating Images to End (Right)
Similarly, we can also float images to the end (right) by adding the #float-end fragment ID.
1{{% bs/clearfix %}}
2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit nunc, fermentum sed eros vitae, euismod tempus tortor. Proin vulputate ac ligula eget lacinia. Morbi nec cursus leo. Etiam massa est, molestie quis commodo in, tincidunt vel ipsum. Etiam eget dolor diam. Suspendisse sodales elit mauris, non vehicula elit pharetra eu. Integer volutpat quam sed libero scelerisque iaculis. Proin bibendum augue neque, et luctus felis convallis a. Aliquam sit amet neque nec sapien consequat varius sit amet vitae augue. Curabitur egestas orci enim.
3
4Maecenas interdum, metus id ornare interdum, purus lacus gravida velit, at volutpat tellus dolor at orci. Quisque venenatis ut ipsum sed rutrum. Nunc porta sed orci in facilisis. Suspendisse non sapien molestie, dictum tellus sed, faucibus diam. Donec rutrum lacus turpis, non bibendum neque sagittis at. Phasellus condimentum nisi et neque tempor, pellentesque laoreet ante dignissim. Sed maximus hendrerit mi, quis rhoncus odio. Vivamus posuere metus eget mattis tempor. Aliquam suscipit sed lacus id tincidunt. Etiam consectetur eu magna eu rutrum. Nullam ultrices vitae leo dictum ultricies.
5{{% /bs/clearfix %}}
Maecenas interdum, metus id ornare interdum, purus lacus gravida velit, at volutpat tellus dolor at orci. Quisque venenatis ut ipsum sed rutrum. Nunc porta sed orci in facilisis. Suspendisse non sapien molestie, dictum tellus sed, faucibus diam. Donec rutrum lacus turpis, non bibendum neque sagittis at. Phasellus condimentum nisi et neque tempor, pellentesque laoreet ante dignissim. Sed maximus hendrerit mi, quis rhoncus odio. Vivamus posuere metus eget mattis tempor. Aliquam suscipit sed lacus id tincidunt. Etiam consectetur eu magna eu rutrum. Nullam ultrices vitae leo dictum ultricies.