{"id":143,"date":"2010-02-16T04:43:44","date_gmt":"2010-02-15T21:43:44","guid":{"rendered":"http:\/\/www.randomlog.org\/?p=143"},"modified":"2010-06-21T04:36:36","modified_gmt":"2010-06-20T21:36:36","slug":"english-div-horizontal-centering-when-theres-more-than-one-of-it","status":"publish","type":"post","link":"https:\/\/randomlog.org\/blog\/english-div-horizontal-centering-when-theres-more-than-one-of-it","title":{"rendered":"Div horizontal centering when there&#8217;s more than one of it"},"content":{"rendered":"<p>We know about <code>margin: 0 auto;<\/code> that will center a div horizontally. It works by setting up an equal left and right margin to the div. But I never find an easy way to do this when there&#8217;re 2 or more consecutive divs on the &#8220;same line&#8221; because:<\/p>\n<ul>\n<li>Using <span style=\"color: #993366;\">margin auto<\/span> will push the next div below, as they are still considered as block level elements.<\/li>\n<li>We can use <span style=\"color: #993366;\">floats<\/span> to put the divs on the same line, but we can&#8217;t center a float.<\/li>\n<li>Using:\u00a0<span style=\"color: #993366;\">position: absolute<\/span>,\u00a0<span style=\"color: #993366;\">left: 50%<\/span>,\u00a0<span style=\"color: #993366;\">margin-left: (minus of half of the element&#8217;s width)<\/span>, is too complex if there&#8217;re a lot of divs. And it&#8217;s also impossible (without complex JavaScript) if the elements&#8217; widths are relative.<\/li>\n<li>We don&#8217;t want to use tables.<\/li>\n<li>Etc.<\/li>\n<\/ul>\n<p>I often found the need to do this when I&#8217;m going to create a horizontally centered main menu, while the menu items needs to be displayed in block to make it work with nice rollovers, complex dropdowns, and the likes, while <strong>the parent main menu items needs to be on relative width<\/strong>.<\/p>\n<p>This is the simplest way I know to solve the problem. Sadly it still involves <strong>a little<\/strong> JavaScript (I&#8217;ll be using jQuery):<\/p>\n<figure id=\"attachment_159\" aria-describedby=\"caption-attachment-159\" style=\"width: 300px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.randomlog.org\/wp-content\/uploads\/2010\/02\/centered-div.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-159\" title=\"The divs are centered\" src=\"http:\/\/www.randomlog.org\/wp-content\/uploads\/2010\/02\/centered-div-300x63.png\" alt=\"The divs are centered\" width=\"300\" height=\"63\" srcset=\"https:\/\/randomlog.org\/blog\/wp-content\/uploads\/2010\/02\/centered-div-300x63.png 300w, https:\/\/randomlog.org\/blog\/wp-content\/uploads\/2010\/02\/centered-div.png 742w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-159\" class=\"wp-caption-text\">The divs are centered<\/figcaption><\/figure>\n<ol>\n<li>Float the <span style=\"color: #ff0000;\">block-level inner items (teh red boxes)<\/span> to the left.<\/li>\n<li>Wrap it with an <span style=\"color: #0000ff;\">absolute positioned container (the blue box)<\/span>. Set the top attribute.<\/li>\n<li>Wrap it again with a <span style=\"color: #339966;\"><span style=\"color: #008000;\">relative positioned containe<\/span>r (the green box)<\/span>.<\/li>\n<li>Use JavaScript to set the <span style=\"color: #0000ff;\">absolute positioned container&#8217;s (the blue box) <\/span><span style=\"color: #993366;\">margin-left<\/span>, and <span style=\"color: #993366;\">left<\/span>.<\/li>\n<\/ol>\n<p>The divs are now horizontally centered. People without JavaScript will see the main menu nicely (including complex rollovers etc) except for the horizontal centering.<\/p>\n<p>And although I personally have dropped support for IE6, this method works on it.<\/p>\n<h1><a href=\"http:\/\/www.randomlog.org\/wp-content\/uploads\/2010\/02\/horizontally-centered-divs.html\">Sample<\/a><\/h1>\n<p><strong>Do you have a better solution?<\/strong> I&#8217;d be very grateful if you share it with me, thanks before \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We know about margin: 0 auto; that will center a div horizontally. It works by setting up an equal left and right margin to the div. But I never find an easy way to do this when there&#8217;re 2 or more consecutive divs on the &#8220;same line&#8221; because: Using margin auto will push the next [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[6,14,11,13],"class_list":["post-143","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-css","tag-javascript","tag-jquery","tag-positioning"],"_links":{"self":[{"href":"https:\/\/randomlog.org\/blog\/wp-json\/wp\/v2\/posts\/143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/randomlog.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/randomlog.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/randomlog.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/randomlog.org\/blog\/wp-json\/wp\/v2\/comments?post=143"}],"version-history":[{"count":35,"href":"https:\/\/randomlog.org\/blog\/wp-json\/wp\/v2\/posts\/143\/revisions"}],"predecessor-version":[{"id":161,"href":"https:\/\/randomlog.org\/blog\/wp-json\/wp\/v2\/posts\/143\/revisions\/161"}],"wp:attachment":[{"href":"https:\/\/randomlog.org\/blog\/wp-json\/wp\/v2\/media?parent=143"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomlog.org\/blog\/wp-json\/wp\/v2\/categories?post=143"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomlog.org\/blog\/wp-json\/wp\/v2\/tags?post=143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}