{"id":532,"date":"2012-04-10T06:04:46","date_gmt":"2012-04-10T06:04:46","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=532"},"modified":"2012-04-10T06:04:46","modified_gmt":"2012-04-10T06:04:46","slug":"center-li-in-ul-using-css","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/center-li-in-ul-using-css\/","title":{"rendered":"Center li in ul using CSS Example"},"content":{"rendered":"<div>When working with unordered lists (ul) using HTML &amp; CSS, you might have seen that the ul li stack vertically. But you may want them to stack horizontally and better yet, align them all horizontally so that all the li center in ul. So do you know how to center list item in the unordered list using CSS? If not, don&#8217;t worry\u00a0In this article, I am going to show\u00a0you\u00a0a very simple way to <strong>center li in ul using CSS<\/strong>\u00a0and thereby\u00a0fabulous CSS menu and center the list items inside the list\u00a0using an easy example.<\/div>\n<div><!--more--><\/div>\n<h2>How to Center li in ul using CSS &#8211; Example<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=532\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>Before I show you the HTML and CSS required to center the list items in its parent unordered list using CSS, let&#8217;s look at the output:<\/p>\n<div>\n<p><a href=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/uploads\/2012\/04\/center_li_in_ul_css.png\" class=\"broken_link\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-534\" title=\"Center li in ul CSS\" alt=\"Center li in ul CSS\" src=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/uploads\/2012\/04\/center_li_in_ul_css-300x60.png\" width=\"300\" height=\"60\" \/><\/a><\/p>\n<\/div>\n<p>So this example assumes that we have a div and we are using an unordered list (ul list) with some list items (li items) in it. It&#8217;s upto you to decide how many li items you want to center in it. There&#8217;s no limit as such. But for the sake of the <strong>example to center li in ul using CSS<\/strong>, I am going to assume that we have 6 li items.<\/p>\n<p><strong>The following is HTML markup. You may use it and change it as you need it.<\/strong><\/p>\n<div>\n<pre class=\"lang:xhtml decode:true\">&lt;style type=\"text\/css\"&gt;#nav {\nbackground-color: #930;\npadding: 10px;\nmargin-left: auto;\nmargin-right: auto;\nwidth: 500px;\nmargin-top: 50px;\n}\n\n#nav ul {\ntext-align: center;\npadding: 0;\nmargin: 0;\n}\n\n#nav li {\ndisplay: inline;\nlist-style: none;\npadding: 10px 5px 10px 5px;\n}\n\n#nav a {\ncolor: #930;\ntext-decoration: none;\npadding: 5px;\nbackground-color: #FFBE9F;\nfont-family: Arial, Helvetica, sans-serif;\nfont-size: 12px;\nfont-style: normal;\nfont-weight: bold;\nfont-variant: normal;\n}\n\n#nav a:hover {\nbackground-color: #FFC9AE;\n}\n&lt;\/style&gt;\n\nHTML:\n&lt;div id=\"nav\"&gt;\n&lt;ul&gt;\n&lt;li&gt;&lt;a href=\"#\"&gt;One&lt;\/a&gt;&lt;\/li&gt;\n&lt;li&gt;&lt;a href=\"#\"&gt;Two&lt;\/a&gt;&lt;\/li&gt;\n&lt;li&gt;&lt;a href=\"#\"&gt;Three&lt;\/a&gt;&lt;\/li&gt;\n&lt;li&gt;&lt;a href=\"#\"&gt;Four&lt;\/a&gt;&lt;\/li&gt;\n&lt;li&gt;&lt;a href=\"#\"&gt;Five&lt;\/a&gt;&lt;\/li&gt;\n&lt;li&gt;&lt;a href=\"#\"&gt;Sixth link is long link&lt;\/a&gt;&lt;\/li&gt;\n&lt;\/ul&gt;\n&lt;\/div&gt;<\/pre>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=532\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<h5>Your Turn!<\/h5>\n<p>Do you know of any other ways to <em><strong>center li in ul using CSS<\/strong><\/em>? Feel free to share your comments below.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>When working with unordered lists (ul) using HTML &amp; CSS, you might have seen that the ul li stack vertically. But you may want them to stack horizontally and better yet, align them all horizontally so that all the li center in ul. So do you know how to center list item in the unordered [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":276,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_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":""},"categories":[18,6,13],"tags":[51,52],"class_list":["post-532","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-tips-and-tricks","category-snippets","category-tips-and-tricks","tag-css-snippets","tag-css-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-8A","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=532"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/532\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}