{"id":33174,"date":"2024-02-06T07:45:05","date_gmt":"2024-02-06T06:45:05","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=33174"},"modified":"2024-02-06T07:49:14","modified_gmt":"2024-02-06T06:49:14","slug":"how-to-use-flexbox-with-divi-to-vertically-align-content","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/","title":{"rendered":"How to Use Flexbox with Divi to Vertically Align Content"},"content":{"rendered":"\n<p>Are you a Divi user struggling to keep your content aligned vertically, no matter the length of your design elements? Vertical alignment is a cornerstone of polished web design.<\/p>\n\n\n\n<p>With Flexbox we can achieve consistent and elegant vertical alignment within Divi.<\/p>\n\n\n\n<p>In this instructional guide, I&#8217;ll cover how you can use Flexbox within Divi and walk you through the process of using this to perfectly align your content. I&#8217;ll cover everything from setting up the Flex container to dealing with responsive design challenges and troubleshooting common issues.<\/p>\n\n\n\n<p>Let&#8217;s dive in and start flexing our design muscles with Divi and Flexbox!<\/p>\n\n\n<div class=\"gb-container gb-container-99d2a21a\">\n\n<h3 class=\"wp-block-heading\">Table of Contents<\/h3>\n\n\n\n<ul class=\"listsquare-listsquare-single wp-block-list\">\n<li><a href=\"#flexbox-in-divi\">Understanding Flexbox in Divi<\/a><\/li>\n\n\n\n<li><a href=\"#creating-the-layout\">Creating the layout example<\/a><\/li>\n\n\n\n<li><a href=\"#aligning-content-vertically\">Aligning Content Vertically (step-by-step)<\/a><\/li>\n\n\n\n<li><a href=\"#trouble-shooting\">Troubleshooting Common Issues<\/a><\/li>\n\n\n\n<li><a href=\"#conclusion\">Conclusion<\/a><\/li>\n<\/ul>\n\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"flexbox-in-divi\">Understanding Flexbox in Divi<\/h2>\n\n\n\n<p>Before we get our hands dirty, let&#8217;s understand what Flexbox is and how it integrates with Divi. Flexbox is a CSS layout model that allows you to design complex layouts with predictable alignment of items in a container. In Divi, Flexbox can be used within sections, columns, and modules to control the layout.<\/p>\n\n\n\n<p>Flexbox is particularly adept at handling vertical alignment, which is notoriously difficult to achieve with traditional CSS. By utilizing Flexbox properties, you can maintain proper alignment and distribution of whitespace, even as the length of your content changes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"creating-the-layout\">Creating the layout example<\/h2>\n\n\n\n<p>In my example, I have created a row with 3 columns, in each column I placed a blurb module.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"293\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Columns-without-flexbox.jpg\" alt=\"Columns without flexbox\" class=\"wp-image-33176\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Columns-without-flexbox.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Columns-without-flexbox-380x164.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Columns-without-flexbox-300x129.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Columns-without-flexbox-510x220.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Columns-without-flexbox-139x60.jpg 139w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Columns-without-flexbox-209x90.jpg 209w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>And this is what we like to accomplish.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"293\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Columns-with-flexbox.jpg\" alt=\"Columns with flexbox\" class=\"wp-image-33177\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Columns-with-flexbox.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Columns-with-flexbox-380x164.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Columns-with-flexbox-300x129.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Columns-with-flexbox-510x220.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Columns-with-flexbox-139x60.jpg 139w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Columns-with-flexbox-209x90.jpg 209w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>In the next steps, I will cover how you can accomplish this with Flexbox.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aligning-content-vertically\">Aligning Content Vertically<\/h2>\n\n\n\n<p>The first step to using Flexbox is to set up a Flex container. This container will hold the elements you wish to align vertically. Here&#8217;s how to create a Flex container within Divi:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Open the Divi Builder<\/h3>\n\n\n\n<p>Navigate to the page where you want to create your Flex container and open the <a href=\"https:\/\/www.markhendriksen.com\/divi-builder-plugin-review-by-elegant-themes\/\">Divi Builder<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Open the Row<\/h3>\n\n\n\n<p>Open the row and go to the Design tab. Under Sizing enable the option <a href=\"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/\">equalize column heights<\/a>.<\/p>\n\n\n\n<p>This option will give the Row the flex property.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"629\" height=\"653\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Enable-the-option-equalize-column-heights.jpg\" alt=\"Enable the option equalize column heights\" class=\"wp-image-33178\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Enable-the-option-equalize-column-heights.jpg 629w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Enable-the-option-equalize-column-heights-380x394.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Enable-the-option-equalize-column-heights-289x300.jpg 289w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Enable-the-option-equalize-column-heights-510x529.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Enable-the-option-equalize-column-heights-58x60.jpg 58w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Enable-the-option-equalize-column-heights-87x90.jpg 87w\" sizes=\"(max-width: 629px) 100vw, 629px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Add CSS<\/h3>\n\n\n\n<p>From here go to the Advanced tab. Under Custom CSS switch to the Module Elements tab. Then add the following CSS snippet in the Main Element field:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>align-items: center;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"619\" height=\"741\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Add-CSS-snippet.jpg\" alt=\"Add the CSS snippet to align content\" class=\"wp-image-33179\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Add-CSS-snippet.jpg 619w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Add-CSS-snippet-380x455.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Add-CSS-snippet-251x300.jpg 251w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Add-CSS-snippet-510x611.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Add-CSS-snippet-50x60.jpg 50w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/Add-CSS-snippet-75x90.jpg 75w\" sizes=\"(max-width: 619px) 100vw, 619px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"trouble-shooting\">Troubleshooting Common Issues<\/h2>\n\n\n\n<p>It can take some practice to master Flexbox with Divi, so don&#8217;t get discouraged if you run into some issues. Here are some common problems and how to troubleshoot them:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Make sure that the option equalize column heights is enabled<\/h3>\n\n\n\n<p>In this example, we did not at Flexbox with CSS but we enabled the option equalize column heights. This will add the flex property to the Row.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>By using Flexbox you can easily align content in Divi. If you like to learn more about Flexbox I can recommend this guide from <a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\">CSS-Tricks<\/a>.<\/p>\n\n\n\n<p>There are many other ways you can use Flexbox to enhance your designs within Divi. Some ideas include using Flexbox to create equal-height columns, creating grids, and even creating responsive layouts that adapt to different screen sizes. The possibilities are endless with this powerful tool.<\/p>\n\n\n\n<p>Don&#8217;t be afraid to experiment and try out different combinations of properties to achieve the desired result.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you a Divi user struggling to keep your content aligned vertically, no matter the length of your design elements? Vertical alignment is a cornerstone of polished web design. With Flexbox we can achieve consistent and elegant vertical alignment within Divi. In this instructional guide, I&#8217;ll cover how you can use Flexbox within Divi and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":33180,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-33174","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Use Flexbox with Divi to Vertically Align Content<\/title>\n<meta name=\"description\" content=\"In this instructional guide, I&#039;ll cover how you can use Flexbox within Divi and walk you through the process of using this to perfectly align your content.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Flexbox with Divi to Vertically Align Content\" \/>\n<meta property=\"og:description\" content=\"In this instructional guide, I&#039;ll cover how you can use Flexbox within Divi and walk you through the process of using this to perfectly align your content.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/\" \/>\n<meta property=\"og:site_name\" content=\"Mark Hendriksen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/madebymarkhendriksen\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-06T06:45:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-06T06:49:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/How-to-vericaly-align-content-in-Divi.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mark Hendriksen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mark Hendriksen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/\"},\"author\":{\"name\":\"Mark Hendriksen\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\"},\"headline\":\"How to Use Flexbox with Divi to Vertically Align Content\",\"datePublished\":\"2024-02-06T06:45:05+00:00\",\"dateModified\":\"2024-02-06T06:49:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/\"},\"wordCount\":551,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/How-to-vericaly-align-content-in-Divi.jpg\",\"articleSection\":[\"Divi tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/\",\"url\":\"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/\",\"name\":\"How to Use Flexbox with Divi to Vertically Align Content\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/How-to-vericaly-align-content-in-Divi.jpg\",\"datePublished\":\"2024-02-06T06:45:05+00:00\",\"dateModified\":\"2024-02-06T06:49:14+00:00\",\"description\":\"In this instructional guide, I'll cover how you can use Flexbox within Divi and walk you through the process of using this to perfectly align your content.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/#primaryimage\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/How-to-vericaly-align-content-in-Divi.jpg\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/How-to-vericaly-align-content-in-Divi.jpg\",\"width\":720,\"height\":400,\"caption\":\"How to vericaly align content in Divi\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markhendriksen.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Divi tutorials\",\"item\":\"https:\/\/www.markhendriksen.com\/divi-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Use Flexbox with Divi to Vertically Align Content\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.markhendriksen.com\/#website\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"name\":\"Mark Hendriksen\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.markhendriksen.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\",\"name\":\"Mark Hendriksen\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"width\":354,\"height\":40,\"caption\":\"Mark Hendriksen\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/madebymarkhendriksen\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\",\"name\":\"Mark Hendriksen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"caption\":\"Mark Hendriksen\"},\"url\":\"https:\/\/www.markhendriksen.com\/author\/twopixels\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Flexbox with Divi to Vertically Align Content","description":"In this instructional guide, I'll cover how you can use Flexbox within Divi and walk you through the process of using this to perfectly align your content.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Flexbox with Divi to Vertically Align Content","og_description":"In this instructional guide, I'll cover how you can use Flexbox within Divi and walk you through the process of using this to perfectly align your content.","og_url":"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/","og_site_name":"Mark Hendriksen","article_publisher":"https:\/\/www.facebook.com\/madebymarkhendriksen","article_published_time":"2024-02-06T06:45:05+00:00","article_modified_time":"2024-02-06T06:49:14+00:00","og_image":[{"width":720,"height":400,"url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/How-to-vericaly-align-content-in-Divi.jpg","type":"image\/jpeg"}],"author":"Mark Hendriksen","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mark Hendriksen","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/#article","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/"},"author":{"name":"Mark Hendriksen","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765"},"headline":"How to Use Flexbox with Divi to Vertically Align Content","datePublished":"2024-02-06T06:45:05+00:00","dateModified":"2024-02-06T06:49:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/"},"wordCount":551,"commentCount":0,"publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/How-to-vericaly-align-content-in-Divi.jpg","articleSection":["Divi tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/","url":"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/","name":"How to Use Flexbox with Divi to Vertically Align Content","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/#primaryimage"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/How-to-vericaly-align-content-in-Divi.jpg","datePublished":"2024-02-06T06:45:05+00:00","dateModified":"2024-02-06T06:49:14+00:00","description":"In this instructional guide, I'll cover how you can use Flexbox within Divi and walk you through the process of using this to perfectly align your content.","breadcrumb":{"@id":"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/#primaryimage","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/How-to-vericaly-align-content-in-Divi.jpg","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/02\/How-to-vericaly-align-content-in-Divi.jpg","width":720,"height":400,"caption":"How to vericaly align content in Divi"},{"@type":"BreadcrumbList","@id":"https:\/\/www.markhendriksen.com\/how-to-use-flexbox-with-divi-to-vertically-align-content\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markhendriksen.com\/"},{"@type":"ListItem","position":2,"name":"Divi tutorials","item":"https:\/\/www.markhendriksen.com\/divi-tutorials\/"},{"@type":"ListItem","position":3,"name":"How to Use Flexbox with Divi to Vertically Align Content"}]},{"@type":"WebSite","@id":"https:\/\/www.markhendriksen.com\/#website","url":"https:\/\/www.markhendriksen.com\/","name":"Mark Hendriksen","description":"","publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.markhendriksen.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.markhendriksen.com\/#organization","name":"Mark Hendriksen","url":"https:\/\/www.markhendriksen.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","width":354,"height":40,"caption":"Mark Hendriksen"},"image":{"@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/madebymarkhendriksen"]},{"@type":"Person","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765","name":"Mark Hendriksen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","caption":"Mark Hendriksen"},"url":"https:\/\/www.markhendriksen.com\/author\/twopixels\/"}]}},"_links":{"self":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/33174","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/comments?post=33174"}],"version-history":[{"count":3,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/33174\/revisions"}],"predecessor-version":[{"id":33186,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/33174\/revisions\/33186"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media\/33180"}],"wp:attachment":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media?parent=33174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/categories?post=33174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/tags?post=33174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}