{"id":332764,"date":"2021-01-15T07:59:43","date_gmt":"2021-01-15T15:59:43","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=332764"},"modified":"2021-01-15T07:59:45","modified_gmt":"2021-01-15T15:59:45","slug":"202-centered-list-markers","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/202-centered-list-markers\/","title":{"rendered":"#202: Centered List Markers"},"content":{"rendered":"\n<p>Like so many things CSS, there is all sorts of little stuff to know, even something as minuscule as centering a list marker.<\/p>\n\n\n\n<p>A reader wrote in with a screenshot of what they were trying to accomplish \u2014 basically an ordered list (<code>&lt;ol&gt;<\/code>) with the list markers (1., 2., 3., etc) on top of the list content and centered. In the screenshot, the text was centered, but the numbers were not. So, let&#8217;s get those numbers centered!<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>The first thing to know is that <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/l\/list-style\/#values-for-list-style-position\">list-style-position<\/a><\/code> needs to be <code>inside<\/code>. That&#8217;ll get the centering party started. If we have a break before the content, we&#8217;re pretty much there. In the video, we play with using the <code>::marker<\/code> to do this, while finding limitations and exploring all the ideas. <\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_dypQydN\" src=\"\/\/codepen.io\/anon\/embed\/dypQydN?height=1000&amp;theme-id=1&amp;slug-hash=dypQydN&amp;default-tab=css,result\" height=\"1000\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed dypQydN\" title=\"CodePen Embed dypQydN\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-marker-pseudo\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">86<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">68<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">86<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">11.1<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">11.3-11.4<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Like so many things CSS, there is all sorts of little stuff to know, even something as minuscule as centering a list marker. A reader wrote in with a screenshot of what they were trying to accomplish \u2014 basically an ordered list (&lt;ol&gt;) with the list markers (1., 2., 3., etc) on top of the [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":332774,"parent":1283,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"video-single.php","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":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":205997,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/m\/marker\/","url_meta":{"origin":332764,"position":0},"title":"::marker","date":"August 3, 2015","format":false,"excerpt":"The\u00a0::marker\u00a0pseudo-element is for styling the stylistic marker of a list element. For example, the bullet point of a default <ul> (e.g. \u2022) or the numeral of a default <ol> (e.g. 1.). This makes it extremely easy to do simple things like colorize them. CodePen Embed Fallback Like a pseudo-element, you'll\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/CleanShot-2021-02-15-at-07.00.59@2x.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":192751,"url":"https:\/\/css-tricks.com\/snippets\/sass\/centering-mixin\/","url_meta":{"origin":332764,"position":1},"title":"Centering Mixin","date":"January 9, 2015","format":false,"excerpt":"Assuming the parent element has position: relative;, these four properties will center a child element both horizontally and vertically inside, no matter what the width of height of either are. @mixin centerer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .parent { position: relative; } .child {\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21073,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-items\/","url_meta":{"origin":332764,"position":2},"title":"align-items","date":"April 11, 2013","format":false,"excerpt":"The align-items property is related to CSS layout. It effects how elements are aligned both in Flexbox and Grid layouts. .container { display: flex; align-items: flex-start; } align-items in Flexboxalign-items in Grid Syntax align-items: flex-start | flex-end | center | baseline | stretch The align-items property defines the default behavior\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1385,"url":"https:\/\/css-tricks.com\/video-screencasts\/2-converting-a-photoshop-mockup-part-2-of-3\/","url_meta":{"origin":332764,"position":3},"title":"#2: Converting a Photoshop Mockup (part 2 of 3)","date":"November 11, 2008","format":false,"excerpt":"In part two of this series on converting a Photoshop mockup to an HTML\/CSS Website I continue on with the header\/menu section of the site. I change the way in which the site is centered when I decide to wrap the entire site in a page-wrap div instead of centering\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14067,"url":"https:\/\/css-tricks.com\/almanac\/properties\/l\/list-style\/","url_meta":{"origin":332764,"position":4},"title":"list-style","date":"September 5, 2011","format":false,"excerpt":"The list-style property is a shorthand property that sets values for three different list-related properties in one declaration: ul { list-style: <list-style-type> || <list-style-position> || <list-style-image>; } Here's an example of the syntax: ul { list-style: square outside none; } Which would be the same as the following longhand version:\u2026","rel":"","context":"In \"list-style\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14029,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/color\/","url_meta":{"origin":332764,"position":5},"title":"color","date":"September 5, 2011","format":false,"excerpt":"The color property in CSS sets the color of text and text decorations. p { color: blue; } Values The color property can accept any CSS color value. Named colors: for example, \"aqua\". Hex colors: for example, #00FFFF or #0FF. RGB and RGBa colors: for example, rgb(0, 255, 255) and\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/332764"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"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=332764"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/332764\/revisions"}],"predecessor-version":[{"id":332873,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/332764\/revisions\/332873"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/332774"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=332764"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=332764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}