Web developers often complain of battling to center content vertically, however, Materialize, makes it a breeze.
Here is how it works.
What Is Materialize?
Materialize is a front-end framework based on Google’s Material Design. Material Design is a design language that combines the classic principles of design along with an easy-to-use framework.
Materialize uses Flexbox, which according to the Mozilla Developer Network is a layout mode for the arrangement of elements on a page. It helps to make complex layouts simple with uncomplicated and clean code.
How Does It Work?
Materialize has a class called valign-wrapper that can center content or send it to the bottom. Each browser interprets CSS in a different way, so this function must be adjusted accordingly.
Let’s look at how Materialize uses the vertical align class in CSS:
.valign-wrapper {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
It seems that the content is being centered three times. This is because it is using a different class for each browser. Materialize achieves this using something called a prefix. Prefixes are used to add new CSS features to a site while still having the browsers support those styles.
In this example, there are two prefixes being used: the WebKit and the MS prefix. The WebKit prefix is used for Chrome, the Android browser, Safari, and some versions of Opera. The MS prefix is used only for Internet Explorer.
If using an old version of Opera, a class with the prefix -o- should be added, or if Firefox is being used, the prefix is -moz-.
Note that the third class, align-items doesn’t have a prefix. Some browsers don’t need a prefix to use the class. The browser does the interpretation of the CSS depending on which class it is in and automatically aligns the content vertically.
Materialize has simplified the process of vertical alignment for almost every browser.
If you’d like to learn more about our services at Encora,
Key Takeaways
-
Materialize is a front-end framework based on Google’s Material Design. Material Design is a design language that combines the classic principles of design along with an easy-to-use framework.
-
It helps to make complex layouts simple with uncomplicated and clean code.
-
Materialize has everything necessary to vertically align content in almost every browser.
About Encora
At Encora, we create competitive advantages for client partners through accelerated technology innovation. We would be delighted to take you further along your journey.
Why Encora
-
We’re global: With 20+ offices and innovation labs in 12 countries, Encora is globally dispersed. Since we operate in different time zones, there is always someone ready to assist you.
-
We’re full-service: Technology innovation encompasses a huge array of topics, skills, and strategies. We offer a full-service concept, each component custom tailored as per your needs, to present a complete solution.
-
We’re dedicated: Our ever-growing team of over 4,000 skilled and dedicated programmers, developers, engineers and strategic thinkers is the reason Encora has become an award-winning tech company with an enviable reputation.
-
We’re experienced: We partner primarily with fast-growing tech companies who are driving innovation and growth within their industries. Our unique delivery model, agile methodology, and consistent unmatched quality have contributed to our steady growth.
