{"id":361,"date":"2007-12-06T15:18:54","date_gmt":"2007-12-06T22:18:54","guid":{"rendered":"http:\/\/css-tricks.com\/centering-list-items-horizontally-slightly-trickier-than-you-might-think\/"},"modified":"2018-05-01T12:38:25","modified_gmt":"2018-05-01T19:38:25","slug":"centering-list-items-horizontally-slightly-trickier-than-you-might-think","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/centering-list-items-horizontally-slightly-trickier-than-you-might-think\/","title":{"rendered":"Centering List Items Horizontally (Slightly Trickier Than You Might Think)"},"content":{"rendered":"<div class=\"explanation\"><strong>Update April 2013:<\/strong> This article is pretty old. This isn&#8217;t very hard. Just give the list centered text (e.g. <code>ul.nav { text-align: center; }<\/code>) and the list items inline-block (e.g. <code>ul.nav li { display: inline-block; }<\/code>). If you want to do it with margin for whatever reason, look into <code>width: fit-content;<\/code>.<\/div>\n<p>The current standard in coding menus is unordered lists. It&#8217;s not as semantic as a <code>&lt;nav&gt;<\/code> tag would be, but it&#8217;s not that bad. Navigation is, after all, a list of sorts.<\/p>\n<p>If you want to make this navigational unordered list <strong>horizontal<\/strong>, you have basically two options:<\/p>\n<ul>\n<li>Make the list items <strong>inline<\/strong> instead of the default <strong>block<\/strong>. <span class=\"inline-code\"> .li { display: inline; }<\/span> This will not force breaks after the list items and they will line up horizontally as far as they are able.<\/li>\n<li><strong>Float<\/strong> the list items. Since we very often want our list items to display as blocks so we are able to set fixed widths on them, we are forced to float them to the left or right to line them up horizontally.<\/li>\n<\/ul>\n<figure><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2007\/12\/centeringhorzlistitems.jpg?ssl=1' alt=\"\" data-recalc-dims=\"1\"><\/figure>\n<p>Now let&#8217;s make a couple common decisions about how we want to display this menu:<\/p>\n<ul>\n<li>We want the menu to be centered. Doesn&#8217;t matter if the menu is in a fixed or fluid width environment, we just want the menu elements to be centered in the parent element<\/li>\n<li>The menu will be a horizontal bar, so we want to make sure that bar looks visually like a bar. We would like to use a repeating background image for this.<\/li>\n<\/ul>\n<p>Now we are in trouble. The <code>&lt;ul&gt;<\/code> itself can&#8217;t be in charge of the background image, because it will only be as wide as it needs to be to help with centering. So we put it inside of a div at 100% width to to take care of the background image. But now our little centering trick doesn&#8217;t work. To be honest I&#8217;m not exactly sure why, but applying <span class=\"inline-code\"> .ul {margin: 0 auto;}<\/span> just doesn&#8217;t work here. This is where the trick comes in&#8230;<\/p>\n<h3>Wrap the list inside a table div<\/h3>\n<p>If we wrap the menu in a &#8220;table&#8221; div, we can solve this. If you are familiar with Stu Nicholls from CSSPlay, he uses this <a href=\"http:\/\/www.cssplay.co.uk\/menus\/pro_dropline.html\" rel=\"noopener\">all the time<\/a> on his awesome horizontal menus. Check out the HTML:<\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;div id=\"menu-outer\"&gt;\r\n  &lt;div class=\"table\"&gt;\r\n    &lt;ul id=\"horizontal-list\"&gt;\r\n      &lt;li&gt;&lt;a href=\"#\"&gt;&lt;img src=\"images\/list-item-1.gif\" alt=\"list item 1\" \/&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;li&gt;&lt;a href=\"#\"&gt;&lt;img src=\"images\/list-item-2.gif\" alt=\"list item 2\" \/&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;li&gt;&lt;a href=\"#\"&gt;&lt;img src=\"images\/list-item-3.gif\" alt=\"list item 3\" \/&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;li&gt;&lt;a href=\"#\"&gt;&lt;img src=\"images\/list-item-4.gif\" alt=\"list item 4\" \/&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<p>Now see the very simple CSS that makes it happen:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">#menu-outer {\r\n\theight: 84px;\r\n\tbackground: url(images\/bar-bg.jpg) repeat-x;\r\n}\r\n\r\n.table {\r\n\tdisplay: table;   \/* Allow the centering to work *\/\r\n\tmargin: 0 auto;\r\n}\r\n\r\nul#horizontal-list {\r\n\tmin-width: 696px;\r\n\tlist-style: none;\r\n\tpadding-top: 20px;\r\n\t}\r\n\tul#horizontal-list li {\r\n\t\tdisplay: inline;\r\n\t}<\/code><\/pre>\n<p>It&#8217;s the table div that get the job done. Some days I think &#8220;Whatever works.&#8221; should be the slogan for CSS.<\/p>\n<p><a href=\"https:\/\/css-tricks.com\/examples\/CenterHorizontalListItems\/\" class=\"button\">View Demo<\/a> &nbsp; <a href=\"https:\/\/css-tricks.com\/examples\/CenterHorizontalListItems.zip\" class=\"button\">Download Files<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Update April 2013: This article is pretty old. This isn&#8217;t very hard. Just give the list centered text (e.g. ul.nav { text-align: center; }) and the list items inline-block (e.g. ul.nav li { display: inline-block; }). If you want to do it with margin for whatever reason, look into width: fit-content;. The current standard in [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":314816,"url":"https:\/\/css-tricks.com\/when-do-you-use-inline-block\/","url_meta":{"origin":361,"position":0},"title":"When do you use inline-block?","date":"July 20, 2020","format":false,"excerpt":"The inline-block value for display is a classic! It's not new and browser support is certainly not something you need to worry about. I'm sure many of us reach for it intuitively. But let's put a point on it. What is it actually useful for? When do you pick it\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/inline-block-columns.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":314876,"url":"https:\/\/css-tricks.com\/when-a-line-doesnt-break\/","url_meta":{"origin":361,"position":1},"title":"When a Line Doesn\u2019t Break","date":"July 2, 2020","format":false,"excerpt":"We expect a line to break when the text on that line reaches the parent box boundaries. We see this every time we create a paragraph, just like this one. When the parent box doesn\u2019t have enough room for the next word in a line, it breaks it and moves\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/line-breaks.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":350670,"url":"https:\/\/css-tricks.com\/css-pseudo-commas\/","url_meta":{"origin":361,"position":2},"title":"CSS Pseudo Commas","date":"August 30, 2021","format":false,"excerpt":"A bonafide CSS trick if there ever was one! @ShadowShahriar created a CodePen demo that uses pseudo-elements to place commas between list items that are displayed inline, and the result is a natural-looking complete sentence with proper punctuation. CodePen Embed Fallback How it works The trick? First, it's to make\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/inline-list.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":153033,"url":"https:\/\/css-tricks.com\/arranging-elements-top-bottom-instead-left-right-float\/","url_meta":{"origin":361,"position":3},"title":"Arranging Elements from Top to Bottom instead of Left to Right (float: down?)","date":"October 15, 2013","format":false,"excerpt":"Reader Marcin A wrote in with this question about a simple unordered list in which they wanted the elements to be arranged in vertical order (top to bottom) instead of horizontal (left to right). So markup like: 1 2 3 4 5 6 Which would end up like: 1 4\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":501,"url":"https:\/\/css-tricks.com\/prevent-menu-stepdown\/","url_meta":{"origin":361,"position":4},"title":"Prevent Menu &#8220;Stepdown&#8221;","date":"February 6, 2008","format":false,"excerpt":"If you are familiar with the concepts of \"floats\", you know that if you float a page element to the left, that the next page element will move up next to that element on the right, if possible. But have you ever seen your floated elements \"stepdown\"? This is a\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":332295,"url":"https:\/\/css-tricks.com\/how-to-add-commas-between-a-list-of-items-dynamically-with-css\/","url_meta":{"origin":361,"position":5},"title":"How to Add Commas Between a List of Items Dynamically with CSS","date":"January 12, 2021","format":false,"excerpt":"Imagine you have a list of items. Say, fruit: Banana, Apple, Orange, Pear, Nectarine We could put those commas (,) in the HTML, but let\u2019s look at how we could do that in CSS instead, giving us an extra level of control. We\u2019ll make sure that last item doesn\u2019t have\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/commas.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/361"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=361"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/361\/revisions"}],"predecessor-version":[{"id":270475,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/361\/revisions\/270475"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}