Image positioning

Image with caption

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a erat a turpis faucibus malesuada quis vitae nulla. Maecenas quam ante, cursus et lacus eu, tristique tempor lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Nam quis malesuada turpis, et varius felis. Phasellus non metus a ex fringilla pellentesque eu id mi. In semper maximus turpis vel scelerisque. Ut posuere, mauris vitae porta posuere, ligula nulla varius elit, nec lobortis nunc quam sed erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean pretium pretium urna, quis dictum libero porta id.

Etiam faucibus leo eros, ac vulputate purus volutpat eget. Suspendisse placerat nulla a justo euismod consectetur. Duis malesuada non leo eget blandit. Morbi sodales nec quam ac dignissim. Pellentesque vehicula ex justo, nec fringilla neque tristique lobortis. Integer a lacinia enim, a malesuada odio. Cras non arcu eleifend, commodo tellus vitae, placerat lacus. Fusce at congue magna. Aenean a mi mauris. Sed pellentesque lacus arcu, et malesuada metus pretium ac. Vivamus et fermentum risus. In posuere vulputate neque at interdum.

Maecenas accumsan vehicula lacus, eu volutpat dolor. Quisque sodales tortor mauris, id bibendum augue venenatis in. Pellentesque justo sem, fringilla nec orci non, sollicitudin maximus ante. Maecenas dictum, sem eget porttitor suscipit, turpis elit venenatis ligula, ut fringilla lectus nulla vitae quam. Aenean sagittis commodo eros, fermentum dignissim ipsum pharetra non. Quisque eget sapien nunc. Proin malesuada nibh sed lorem varius, sed finibus lacus consequat.

Image with no caption floating left

Proin id rhoncus est, id ullamcorper arcu. Maecenas volutpat hendrerit quam, ac sodales mauris sagittis vitae. Donec in turpis augue. Maecenas erat lorem, tempor id eros vitae, interdum ultrices massa. Praesent aliquet, arcu quis gravida varius, ipsum felis porta leo, ac vehicula arcu nisl pellentesque nisl. Ut lacinia risus cursus lobortis tristique. Praesent id laoreet libero. Nunc lacinia velit ut hendrerit bibendum. Quisque iaculis quis enim eget luctus. Nulla efficitur semper turpis, et imperdiet massa accumsan id. Cras a scelerisque magna. Morbi purus nunc, dictum non dignissim pulvinar, mollis eu nunc.

Vestibulum posuere lectus eu odio tincidunt, non semper purus scelerisque. Mauris tincidunt quam vitae sapien faucibus dignissim. Vivamus interdum tortor ac lacus malesuada, et posuere nibh mattis. Proin laoreet consequat enim, ut consectetur nisl consectetur at. Sed sed accumsan lectus. Cras rutrum nibh justo, non pellentesque lorem dictum ut. In velit massa, aliquet eu congue commodo, blandit eu justo. Ut vestibulum erat vitae odio accumsan, a porttitor sapien volutpat. Nam hendrerit consequat ligula, et laoreet leo aliquet vitae. Maecenas ac orci leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod tempor ornare. Vivamus ultricies volutpat purus non vehicula. Suspendisse potenti. Mauris orci mi, tincidunt vel leo non, blandit iaculis leo. Sed dignissim eleifend tellus nec mollis.

Image with no caption floating right

Praesent aliquet, arcu quis gravida varius, ipsum felis porta leo, ac vehicula arcu nisl pellentesque nisl. Ut lacinia risus cursus lobortis tristique. Praesent id laoreet libero. Nunc lacinia velit ut hendrerit bibendum. Quisque iaculis quis enim eget luctus. Nulla efficitur semper turpis, et imperdiet massa accumsan id. Cras a scelerisque magna. Morbi purus nunc, dictum non dignissim pulvinar, mollis eu nunc. Vestibulum posuere lectus eu odio tincidunt, non semper purus scelerisque. Mauris tincidunt quam vitae sapien faucibus dignissim. Vivamus interdum tortor ac lacus malesuada, et posuere nibh mattis. Proin laoreet consequat enim, ut consectetur nisl consectetur at. Sed sed accumsan lectus. Cras rutrum nibh justo, non pellentesque lorem dictum ut. In velit massa, aliquet eu congue commodo, blandit eu justo. Ut vestibulum erat vitae odio accumsan, a porttitor sapien volutpat. Nam hendrerit consequat ligula, et laoreet leo aliquet vitae. Maecenas ac orci leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod tempor ornare. Vivamus ultricies volutpat purus non vehicula. Suspendisse potenti. Mauris orci mi, tincidunt vel leo non, blandit iaculis leo. Sed dignissim eleifend tellus nec mollis.

Horizontally Centering Images

You have the ability to centre images horizontal in three different ways.

Using text alignment class .text-center

Using the .mx-auto class.
**This will only work on images with image set to have the display value set to block**

Using flexbox.
**The parent element must have a display:flex for this to work. The class .d-flex does this.**

Updated August 12, 2024 by Digital & Web Operations (web_services@athabascau.ca)