Foundation CSS Media Object Section Alignment
Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is based on bootstrap, which is similar to SaaS. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
Media Object in Foundation CSS adds the media (usually an image) with some content (usually text) by using media object classes. We can use these classes to add both media and some textual content. We can use the media-object class to create the division and the media-object-section to create the sections.
Foundation CSS Media Object Basics Classes:
- media-object: This class is used to create the division for the media and content.
- media-object-section: This class is used to create the sections.
Section Alignment in Media Object: By default, the section aligns to the top of the container. With the help of section alignment middle and bottom classes, we can align the section both in the middle and bottom positions.
<div class="media-object"> <div class="media-object-section middle/bottom"> ..... </div> <div class="media-object-section middle/bottom"> ..... </div> </div>
Note: Download necessary files from https://get.foundation/sites/docs/installation.html or https://codepen.io/ZURBFoundation/pen/aWKpOj use for trying out examples. Compressed CSS might not work properly (i.e. called through CDN).
Example 1: This example illustrates the Section Alignment middle Media Object in Foundation CSS.
Example 2: This example illustrates the Section Alignment bottom Media Object in Foundation CSS.