• Home
  • About Us
  • Digital Marketing Terms
  • Free Tech Support
  • Contact Us
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

My Code Snippets

Real Answers From Real Developers

  • WordPress General
  • Divi Builder Tutorials
  • WordPress Plugins
  • Local SEO
  • Show Search
Hide Search

Using Flexbox CSS To Center Elements

code-admin · June 16, 2021 · Leave a Comment

Instead of using padding to position an element (text in the example), you can use CSS Flexbox (flexible box layout). A good use is when you have text in the center of a container and need it to stay centered, both horizontally and vertically, no matter what the screen size or text line breakpoint. An example of this is a page title or headline in a banner or a row with multiple columns, each with centered text of varying line lengths.

The problem with using padding to set position is that when the screen width minimizes and the text breaks to two lines, the text is no longer vertically centered.

Add the following CSS to the text element using the builder’s CSS attributes tab, or assign a class to the element if applying CSS via a stylesheet. (this method is used in the demo a little farther down on this page.

display: flex;
justify-content: center; /*horizontal alignment*/
align-items: center; /*vertical alignment*/

There are times when you may need the following CSS to the parent element: (example row/column)

display: flex;
justify-content: center;
text-align:center; 

Demo

HTML Code

<div class="flex-parent"><p class="flex-content">Your content goes here.</p></div>

CSS Code

.flex-parent 
{background-color:#888888; 
display: flex;
justify-content: center;
text-align: center;}

.flex-content 
{min-height:500px; 
display: flex;
justify-content: center; /*horizontal alignment*/
align-items: center; /* vertical alignment*/ 
font-size:72px; 
line-height:1.0em;}

How the code renders…

Your content goes here.


All Flex style properties are listed below as a reference of options.

Parent container properties

 .container {

  display: flex; /* or inline-flex */

}

.container {

  flex-direction: row | row-reverse | column | column-reverse;

}

.container {

  flex-wrap: nowrap | wrap | wrap-reverse;

}

.container {

  flex-flow: column wrap;

}  (This is the shorthand to combine direction and wrap)

.container {

  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right … + safe | unsafe;

}

.container {

  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + … safe | unsafe;

}

.container {

  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + … safe | unsafe;

}

Properties for the Children

(flex items)

.item {

  order: 5; /* default is 0 */

}

.item {

  flex-grow: 4; /* default 0 */

}

.item {

  flex-shrink: 3; /* default 1 */

}

.item {

  flex-basis:  | auto; /* default auto */

}

.item {

  flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

}

.item {

  align-self: auto | flex-start | flex-end | center | baseline | stretch;

}

Filed Under: Uncategorized

You May Also Like

Divi Header Transparent Menu
Enable Classic Editor For The Events Calendar
Enable Classic Editor For The Events Calendar Divi Builder

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Recent Posts

  • The Site is Experiencing Technical Difficulties WordPress
  • Using Flexbox CSS To Center Elements
  • Divi Header Transparent Menu
  • Divi Builder Not Working With Cloudflare CDN
  • Divi Visual Builder Not Saving Changes

Recent Comments

  • Jackie on How to Fix The Jumping Header Issue Divi Builder
  • Kate on Divi Builder Not Working With Cloudflare CDN
  • Mimi Cartee on Can’t Change The WordPress Admin Email Address

Archives

  • November 2021
  • June 2021
  • May 2021
  • March 2021
  • January 2021
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • March 2020
  • October 2019
  • September 2019
  • May 2019

Categories

  • Digital Marketing
  • Digital Marketing During Covid-19
  • Digital Technology
  • Divi Builder Resources
  • Divi Builder Tutorials
  • Gravity Forms
  • Gravity Forms Snippets
  • Local SEO
  • Social Media Marketing
  • Social Media Trends 2021
  • Uncategorized
  • WooCommerce Snippets
  • WordPress Code
  • WordPress Experts
  • WordPress Plugins
  • WordPress Technology
  • WordPress Themes
  • WordPress Troubleshooting

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Copyright © 2023 · Daily Dish Pro on Genesis Framework · WordPress · Log in

Manage Cookie Consent
We use cookies to optimize our website and our service.
Functional Always active
The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
Preferences
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistics
The technical storage or access that is used exclusively for statistical purposes. The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.
Manage options Manage services Manage vendors Read more about these purposes
Preferences
{title} {title} {title}