{"id":640,"date":"2019-12-21T11:17:47","date_gmt":"2019-12-21T10:17:47","guid":{"rendered":"https:\/\/ekiwi.de\/?p=640"},"modified":"2019-12-21T11:29:14","modified_gmt":"2019-12-21T10:29:14","slug":"div-tag-zentrieren","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/640\/div-tag-zentrieren\/","title":{"rendered":"Div-Tag zentrieren"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/index.php\/640\/div-tag-zentrieren\/#Cant_center\" >Can&#8217;t center &lt;div&gt;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/index.php\/640\/div-tag-zentrieren\/#HTML-Code_mit_div-Elementen\" >HTML-Code mit div-Elementen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ekiwi.de\/index.php\/640\/div-tag-zentrieren\/#CSS-Code_fuer_div-Elemente\" >CSS-Code f\u00fcr div-Elemente<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ekiwi.de\/index.php\/640\/div-tag-zentrieren\/#CSS-Code_fuer_die_zentrierte_Ausrichtung\" >CSS-Code f\u00fcr die zentrierte Ausrichtung<\/a><\/li><\/ul><\/nav><\/div>\n<p>Das Zentrieren eines <em>&lt;div&gt;<\/em>-Tags kann schon mal f\u00fcr Frust sorgen, wenn unverst\u00e4ndlicher Weise das alte <em>center<\/em>-Tag oder<em> text-align<\/em>-Attribute kein Wirkung zeigen. Dieser Artikel zeigt, wie man dennoch ein <em>div<\/em>-Tag zentriert bekommt.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Cant_center\"><\/span>Can&#8217;t center &lt;div&gt;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Die Stichworte<\/p>\n<ul>\n<li><em>&#8222;Can&#8217;t center div&#8220;<\/em><\/li>\n<li><em>&#8222;div zenztrieren&#8220;<\/em><\/li>\n<li><em>&#8222;Centering div within div&#8220;<\/em><\/li>\n<li><em>&#8222;div only left align&#8220;<\/em><\/li>\n<li><em>&#8222;div l\u00e4sst sich nur links ausrichten&#8220;<\/em><\/li>\n<li><em>&#8222;div innerhalb div zentrieren&#8220;<\/em><\/li>\n<li><em>&#8222;text-align: center doesn&#8217;t wort&#8220;<\/em><\/li>\n<li><em>&#8222;text-align center nur linksb\u00fcndig&#8220; <\/em>oder<\/li>\n<li>&#8222;div mittig ausrichten&#8220;<\/li>\n<\/ul>\n<p>gibt man schnell voller Frust bei Google ein, wenn man wieder mal mit seinem <em>HTML<\/em>&#8211; und <em>CSS-Latein<\/em> am Ende ist.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"HTML-Code_mit_div-Elementen\"><\/span>HTML-Code mit div-Elementen<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ausgangsituation ist meistens der folgende HTML-Code mit verschachtelten <em>div<\/em>-Tags. Zielstellung ist es, dass der Text oder die Elemente innerhalb der div-Elemente mit der ID Child im Browser mittig ausgerichtet werden.<\/p>\n<blockquote>\n<pre>&lt;div class=\"my_div_wrapper\"&gt;\r\n&lt;div class=\"my_row\"&gt;\r\n&lt;div class=\"my_column\"&gt;\r\n&lt;div class=\"my_content\" id=\"content1\"&gt;Text 1&lt;\/div&gt;\r\n&lt;div class=\"my_content\" id=\"content2\"&gt;Text 2&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"my_column\"&gt;\r\n&lt;div class=\"my_content\" id=\"content3\"&gt;Text 3&lt;\/div&gt;\r\n&lt;div class=\"my_content\" id=\"content4\"&gt;Text 4&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/blockquote>\n<h3><span class=\"ez-toc-section\" id=\"CSS-Code_fuer_div-Elemente\"><\/span>CSS-Code f\u00fcr div-Elemente<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Die zugeh\u00f6rigen CSS-Klassen sehen dann so \u00e4hnlich wie folgdener Code aus. Diese CSS-Klassen stellen die vier Texte als zwei Zeilen und zwei Spalten dar, die sich responsiv verhalten. Um den <em><strong>Text zentriert auszurichten<\/strong><\/em>, ist man geneigt, dass CSS-Attribute &#8222;<em><strong>text-align: center;<\/strong><\/em>&#8220; zu verwenden.<\/p>\n<blockquote>\n<pre>&lt;style type=\"text\/css\"&gt;\r\n.my_div_wrapper{\r\ndisplay: flex;\r\n<span style=\"color: #ff0000;\">text-align: center;<\/span>\r\n}\r\n.my_row:after {\r\ndisplay: table;\r\n<span style=\"color: #ff0000;\">text-align: center;<\/span>\r\n}\r\n.my_column {\r\nfloat: left;\r\n}\r\n&lt;\/style&gt;\r\n<\/pre>\n<\/blockquote>\n<p>Man kann es selbst ausprobieren und wird feststellen, dass der Text immer linksb\u00fcndig dargestellt wird. Selbst wenn man um den obersten <em>parent-div<\/em> ein gute altes abgehangenen <strong>&lt;center&gt;<\/strong>-Tag setzt, bleibt dies ohne Wirkung. Echt \u00e4rgerlich!<\/p>\n<h3><span class=\"ez-toc-section\" id=\"CSS-Code_fuer_die_zentrierte_Ausrichtung\"><\/span>CSS-Code f\u00fcr die zentrierte Ausrichtung<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Das Problem hierbei ist die Verwendung des Attributs <a title=\"\" href=\"https:\/\/developer.mozilla.org\/de\/docs\/Web\/CSS\/display\" target=\"_blank\" rel=\"noopener noreferrer\"><em><strong>display<\/strong> <\/em><\/a>mit seinen verschieden values, wie <em>flex<\/em>, <em>inline<\/em>, <em>box<\/em> etc. Diese verwendet man f\u00fcr m\u00f6glichst flexible Darstellungen im <a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\" target=\"_blank\" rel=\"noopener noreferrer\">responsiven Design<\/a>. Bei Flex-Elementen wird aber von dem Browsern beim Rendern die Eigenschaft <em>text-align<\/em> ignoriert. Die Ausrichtung erfolgt hier \u00fcber das Attribut <em><strong>&#8222;justify-content: center;&#8220;<\/strong><\/em>. Die Flex-Elemente werden dadurch mittig in der Zeile ausgerichtet.<\/p>\n<p>Des richtige bzw. korrigierte CSS-Code sieht dann wie folgt aus:<\/p>\n<blockquote>\n<pre>&lt;style type=\"text\/css\"&gt;\r\n.my_div_wrapper{\r\ndisplay: flex;\r\n<span style=\"color: #ff9900;\"><strong>justify-content: center;<\/strong><\/span>\r\n}\r\n\r\n.my_row:after {\r\ndisplay: table;\r\n}\r\n.my_column {\r\nfloat: left;\r\n}\r\n&lt;\/style&gt;<\/pre>\n<\/blockquote>","protected":false},"excerpt":{"rendered":"<p>Das Zentrieren eines div-Tags kann schon mal f\u00fcr Frust sorgen, wenn unverst\u00e4ndlicher Weise das alte center-Tag oder text-align-Attribute kein Wirkung zeigen. Dieser Artikel zeigt, wie man dennoch ein div-Tag zentriert bekommt.<\/p>\n","protected":false},"author":2,"featured_media":80,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[5],"tags":[116,22,113,4,21,114,117,115],"class_list":["post-640","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hmtl","tag-ausrichtung","tag-css","tag-div","tag-html","tag-responsive","tag-text-align","tag-textausrichtung","tag-zentrieren"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=640"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/640\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/80"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=640"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=640"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}