- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
Foundation - Media Object Section Alignment
Description
You can align the sections in the middle or bottom by using the .middle and .bottom classes respectively.
Example
The following example demonstrates the use of section alignment in Foundation −
<!doctype html> <head> <meta charset = "utf-8" /> <meta http-equiv = "x-ua-compatible" content = "ie = edge" /> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0" /> <title>Media Object Section Alignment</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous"> <!-- Compressed JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script> </head> <body> <h2>Media Object Section Alignment Example</h2> <div class = "media-object"> <div class = "media-object-section middle"> <div class = "thumbnail"> <img src = "/foundation/images/kitchen_sink/winter.jpg" alt = "Section Alignment"> </div> </div> <div class = "media-object-section"> <h4>Foundation</h4> <p>Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. </p> <p>Foundation is semantic, readable, flexible, and completely customizable. Foundation for Sites is jam-packed with features to help people rapidly build content-focused websites. </p> </div> <div class = "media-object-section bottom"> <div class = "thumbnail"> <img src = "/foundation/images/kitchen_sink/winter.jpg" alt = "Section Alignment"> </div> </div> </div> </body> </html>
Output
Let us carry out the following steps to see how the above given code works −
Save the above given html code media_section_alignment.html file.
Open this HTML file in a browser, an output is displayed as shown below.
foundation_containers.htm
Advertisements