Foundation CSS Media Object Section Alignment
Last Updated :
17 Mar, 2022
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.
Syntax :
<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.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Media Object Section Alignment</title>
<link rel="stylesheet"
href=
</head>
<body style="margin: 2rem; width: 50%;">
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h4>Foundation CSS Media Object
Section Alignment - middle</h4>
</center>
<div class="media-object">
<div class="media-object-section middle">
<div class="thumbnail">
<img src=
</div>
</div>
<div class="media-object-section main-section">
<h5><strong>GeeksforGeeks</strong></h5>
<p>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles. A Computer Science
portal for geeks. It contains well written,
well thought and well explained computer
science and programming articles.
</p>
<p>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles. A Computer Science
portal for geeks. It contains well written,
well thought and well explained computer
science and programming articles.
</p>
<p>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles. A Computer Science
portal for geeks. It contains well written,
well thought and well explained computer
science and programming articles.
</p>
</div>
</div>
</body>
</html>
|
Output:
Foundation CSS Media Object Section Alignment
Example 2: This example illustrates the Section Alignment bottom Media Object in Foundation CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Media Object Section Alignment</title>
<link rel="stylesheet"
href=
</head>
<body style="margin: 2rem; width: 50%;">
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h4>Foundation CSS Media Object
Section Alignment - bottom</h4>
</center>
<div class="media-object">
<div class="media-object-section bottom">
<div class="thumbnail">
<img src=
</div>
</div>
<div class="media-object-section main-section">
<h5><strong>GeeksforGeeks</strong></h5>
<p>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles. A Computer Science
portal for geeks. It contains well written,
well thought and well explained computer
science and programming articles.
</p>
<p>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles. A Computer Science
portal for geeks. It contains well written,
well thought and well explained computer
science and programming articles.
</p>
<p>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles. A Computer Science
portal for geeks. It contains well written,
well thought and well explained computer
science and programming articles.
</p>
</div>
</div>
</body>
</html>
|
Output:
Foundation CSS Media Object Section Alignment
Reference: https://get.foundation/sites/docs/media-object.html#section-alignment
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...