{"id":4269,"date":"2024-04-15T03:59:13","date_gmt":"2024-04-14T19:59:13","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4269"},"modified":"2024-04-15T03:59:13","modified_gmt":"2024-04-14T19:59:13","slug":"centering-box-summary","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/centering-box-summary\/","title":{"rendered":"Centering box summary"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>The <strong>centering box<\/strong> is a 3 x 3 grid that emerges in the <strong>Style panel<\/strong> &gt; <strong>Layout<\/strong> when the display is configured to flex or grid. The centering box can be utilized as a visual representation of the flex parent or grid to promptly align flex and grid children within their parent components.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/65f84968c9f36c5e18b05213_align20box20-20with20highlight.webp\" loading=\"lazy\" title=\"65f84968c9f36c5e18b05213_align20box20-20with20highlight\"><\/div>\n<\/figure>\n<p>To commence, select the centering box <strong>cell<\/strong> to which you wish to align your content, or tap any part of the <strong>centering box<\/strong> to focus on it and employ the arrow keys on your keyboard to move through its cells. You can double-tap centering box cells and\/or use quick methods to promptly align flex and grid children. <\/p>\n<p>While you interact with the centering box, the screen mirrors your adjustments and the <strong>X<\/strong> and <strong>Y<\/strong> axis dropdowns get updated to present the current alignment configurations.<\/p>\n<h2>Quick methods <\/h2>\n<h3>Flex<\/h3>\n<ul role=\"list\">\n<li>Establish justification (e.g., justify-content) to <strong>space between<\/strong>: double-tap a centering box cell or <strong>Command<\/strong> (on Mac) or <strong>Control<\/strong> (on Windows) + tap on a centering box <strong>cell <\/strong><\/li>\n<li>Establish alignment (e.g., align-items) to <strong>stretch<\/strong>: <strong>Option<\/strong> (on Mac) or <strong>Alt <\/strong>(on Windows) + tap on a centering box <strong>cell<\/strong><\/li>\n<\/ul>\n<p>Discover more about aligning flex children.<\/p>\n<h3>Grid<\/h3>\n<ul role=\"list\">\n<li>Establish justification (e.g., justify-items) to <strong>stretch<\/strong>: double-tap a centering box cell or <strong>Command<\/strong> (on Mac) or <strong>Control<\/strong> (on Windows) + <strong>tap<\/strong> a centering box <strong>cell<\/strong><\/li>\n<li>Establish alignment (e.g., align-items) to <strong>stretch<\/strong>: <strong>Option<\/strong> (on Mac) or <strong>Alt <\/strong>(on Windows) + tap a centering box <strong>cell<\/strong><\/li>\n<\/ul>\n<p>Discover more about aligning grid children.<\/p>\n<h6><strong>Remark: <\/strong>Certain alignment choices aren&#8217;t solely accessible through the centering box, yet they can be accessed through the X and Y axis dropdowns.<\/h6>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Align flex and grid children with the align box as a visual guide.","protected":false},"author":2,"featured_media":5160,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-4269","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4269","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=4269"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4269\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5335"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=4269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=4269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=4269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}