{"id":3762,"date":"2017-06-08T17:59:25","date_gmt":"2017-06-08T15:59:25","guid":{"rendered":"https:\/\/florianbrinkmann.com\/en\/?p=3762"},"modified":"2020-02-09T10:59:50","modified_gmt":"2020-02-09T09:59:50","slug":"just-vertically-center-one-specific-flex-item","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/just-vertically-center-one-specific-flex-item-3762\/","title":{"rendered":"Just vertically center one specific flex item"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The CSS <code class=\"lang-css\">align-items: center<\/code> lets you center flex items which are next to each other, so that their horizontal midpoint is on one horizontal line. But recently I had two flex items and only wanted to center the right one, if the left is higher, but not the left one if the right is higher. For that, I cannot use <code class=\"lang-css\">align-items: center<\/code>, but the solution is not much more complex:<\/p>\n\n\n<pre class=\"wp-block-code lang-css\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.center-flex-item<\/span> {\n\t<span class=\"hljs-attribute\">margin-bottom<\/span>: auto;\n\t<span class=\"hljs-attribute\">margin-top<\/span>: auto;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">With that, the flex item <code class=\"lang-css\">.center-flex-item<\/code> will be centered if a higher item sits beneath it, but the other item will not be centered if <code class=\"lang-css\">.center-flex-item<\/code> is greater.<\/p>\n\n\n\n<div class=\"update-box\">\n<p><strong>Update from June 9, 2017:<\/strong> Easier and with the probably <em>more correct<\/em> CSS rule for the scenario, it looks like that:<\/p>\n<pre class=\"lang-css\"><code class=\"lang-css\">.center-flex-item {\n\talign-self: center;\n}<\/code><\/pre>\n<p>Thanks to Matthias for the hint!<\/p>\n<p><div class=\"embed-privacy-local-tweet\"><blockquote class=\"twitter-tweet\" data-width=\"550\" data-dnt=\"true\"><p lang=\"de\" dir=\"ltr\">Gut zu wissen, dass es noch eine Alternative gibt. Denn w\u00e4re nicht eigentlich align-self das, was gesucht ist? <a href=\"https:\/\/t.co\/j7WKfvyH6k\">https:\/\/t.co\/j7WKfvyH6k<\/a><\/p><cite class=\"embed-privacy-tweet-meta\"><span class=\"embed-privacy-author-meta\">\u2014 Matthias Kittsteiner (@MatzeKitt) <\/span><a href=\"https:\/\/twitter.com\/MatzeKitt\/status\/872854644019662848?ref_src=twsrc%5Etfw\">June 8, 2017<\/a><\/cite><\/blockquote><\/div><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The CSS align-items: center lets you center flex items which are next to each other, so that their horizontal midpoint is on one horizontal line. But recently I had two flex items and only wanted to center the right one, if the left is higher, but not the left one if the right is higher. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","webmentions_disabled_pings":false,"webmentions_disabled":false,"lazy_load_responsive_images_disabled":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-3762","post","type-post","status-publish","format-standard","hentry","category-web-development"],"wp-worthy-pixel":{"ignored":false,"public":null,"server":null,"url":null},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3762","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=3762"}],"version-history":[{"count":3,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3762\/revisions"}],"predecessor-version":[{"id":5881,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3762\/revisions\/5881"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=3762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=3762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=3762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}