{"id":2602,"date":"2018-03-05T08:23:17","date_gmt":"2018-03-05T07:23:17","guid":{"rendered":"http:\/\/www.capri-soft.de\/blog\/?p=2602"},"modified":"2018-03-05T10:10:03","modified_gmt":"2018-03-05T09:10:03","slug":"css-vertical-alignment-in-div","status":"publish","type":"post","link":"https:\/\/www.capri-soft.de\/blog\/?p=2602","title":{"rendered":"CSS: Vertical alignment of HTML elements in horizontal DIV"},"content":{"rendered":"<h1>Problem<\/h1>\n<p>Mehrere Element in einem DIV-Container sollen horizontal zentriert werden.<br \/>\n<a href=\"https:\/\/www.capri-soft.de\/blog\/?attachment_id=2603\" rel=\"attachment wp-att-2603\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"2603\" data-permalink=\"https:\/\/www.capri-soft.de\/blog\/?attachment_id=2603\" data-orig-file=\"https:\/\/i0.wp.com\/www.capri-soft.de\/blog\/wp-content\/uploads\/2018\/03\/horizontal_alignment.png?fit=593%2C118&amp;ssl=1\" data-orig-size=\"593,118\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"horizontal_alignment\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/www.capri-soft.de\/blog\/wp-content\/uploads\/2018\/03\/horizontal_alignment.png?fit=474%2C94&amp;ssl=1\" class=\"alignnone size-full wp-image-2603\" src=\"https:\/\/i0.wp.com\/www.capri-soft.de\/blog\/wp-content\/uploads\/2018\/03\/horizontal_alignment.png?resize=474%2C94&#038;ssl=1\" alt=\"\" width=\"474\" height=\"94\" srcset=\"https:\/\/i0.wp.com\/www.capri-soft.de\/blog\/wp-content\/uploads\/2018\/03\/horizontal_alignment.png?w=593&amp;ssl=1 593w, https:\/\/i0.wp.com\/www.capri-soft.de\/blog\/wp-content\/uploads\/2018\/03\/horizontal_alignment.png?resize=300%2C60&amp;ssl=1 300w\" sizes=\"auto, (max-width: 474px) 100vw, 474px\" \/><\/a><\/p>\n<h1>Ansatz &#8211; Approach<\/h1>\n<p>Usage of FLEX Container (HTML Standard)<\/p>\n<h1>L\u00f6sung &#8211; Solution<\/h1>\n<p>DIV Declaration:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;div class=&quot;oneLineLayout&quot;&gt; ... &lt;\/div&gt;\r\n<\/pre>\n<p>CSS Class:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.oneLineLayout {\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex-wrap: wrap;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n}\r\n<\/pre>\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=https%3A%2F%2Fwww.capri-soft.de%2Fblog%2F%3Fp%3D2602&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:450px;margin-top:5px;\"><\/iframe>","protected":false},"excerpt":{"rendered":"<p>Problem Mehrere Element in einem DIV-Container sollen horizontal zentriert werden. Ansatz &#8211; Approach Usage of FLEX Container (HTML Standard) L\u00f6sung &#8211; Solution DIV Declaration: &lt;div class=&quot;oneLineLayout&quot;&gt; &#8230; &lt;\/div&gt; CSS Class: .oneLineLayout { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; }<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[14],"tags":[],"class_list":["post-2602","post","type-post","status-publish","format-standard","hentry","category-htmlcss"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p4yGeN-FY","jetpack_likes_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2602"}],"version-history":[{"count":6,"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2602\/revisions"}],"predecessor-version":[{"id":2605,"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2602\/revisions\/2605"}],"wp:attachment":[{"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}