{"id":14110,"date":"2011-09-06T18:43:28","date_gmt":"2011-09-07T01:43:28","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14110"},"modified":"2017-12-22T09:02:59","modified_gmt":"2017-12-22T16:02:59","slug":"text-align","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-align\/","title":{"rendered":"text-align"},"content":{"rendered":"<p>The <code>text-align<\/code> property in CSS is used for aligning the inner content of a block element.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">p {\r\n  text-align: center;\r\n}<\/code><\/pre>\n<p>These are the traditional values for text-align:<\/p>\n<ul>\n<li><code>left<\/code> &#8211; The default value. Content aligns along the left side.<\/li>\n<li><code>right<\/code> &#8211; Content aligns along the right side.<\/li>\n<li><code>center<\/code> &#8211; Content centers between the left and right edges. White space on the left and right sides of each line should be equal.<\/li>\n<li><code>justify<\/code> &#8211; Content spaces out such that as many blocks fit onto one line as possible and the first word on that line is along the left edge and the last word is along the right edge.<\/code>\n<\/li>\n<li><code>inherit<\/code> &#8211; The value will be whatever the parent element&#8217;s is.<\/li>\n<\/ul>\n<p>&#8220;Content&#8221; is used here as as term instead of &#8220;text&#8221;, because while text-align certainly affects text, it affects all inline or inline-block elements in that container. <\/p>\n<p>There are two new values in CSS3 as well, start and end. These values make multiple language support easier For example, English is a left-to-right (ltr) language and Arabic is a right-to-left (rtl) language. Using &#8220;right&#8221; and &#8220;left&#8221; for values is too rigid and doesn&#8217;t adapt as the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/d\/direction\/\">direction<\/a> changes. These new values do adapt:<\/p>\n<ul>\n<li><code>start<\/code> &#8211; Same as &#8220;left&#8221; in ltr, same as &#8220;right&#8221; in rtl.<\/li>\n<li><code>end<\/code> &#8211; Same as &#8220;right&#8221; in ltr, same as &#8220;left&#8221; in rtl.<\/li>\n<\/ul>\n<figure id='post-20548 media-20548' class='align-none'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Image-upload-on-2013-03-11-at-13-09-35.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>There is also <code>match-parent<\/code>, which is similar to <code>inherit<\/code>, only that the new value is calculated against the current element&#8217;s direction instead of, you know, not doing that. <\/p>\n<p>There are a few things in the spec that don&#8217;t have any browser support yet. One is the value &#8220;start end&#8221; which would align the first line as if was &#8220;start&#8221; and any subsequent lines as if it was &#8220;end&#8221;. Another is giving the value a string, like <code>text-align: \".\" start;<\/code> The text will aline along the first occurrence of that &lt;string>, as in to line up a column of numbers along a decimal point.<\/p>\n<h3>Examples<\/h3>\n<p class=\"example-left\">This text is left aligned.<\/p>\n<p class=\"example-right\">This text is right aligned.<\/p>\n<p class=\"example-center\">I&#8217;m centered!<\/p>\n<p class=\"example-justify\">I&#8217;m justified. I fill the space exactly (except on the last line), even if I have to stretch a bit at times.<\/p>\n<p class=\"example-inherit\">I inherit the alignment of my parent. In this case, that means left.<\/p>\n<h3>Other Resources<\/h3>\n<ul>\n<li><a href=\"http:\/\/www.w3.org\/TR\/REC-CSS1\/#text-align\" rel=\"noopener\">CSS1 spec<\/a><\/li>\n<li><a href=\"http:\/\/www.w3.org\/TR\/CSS21\/text.html#alignment-prop\" rel=\"noopener\">CSS2 spec<\/a><\/li>\n<li><a href=\"http:\/\/www.w3.org\/TR\/css3-text\/#text-align0\" rel=\"noopener\">CSS3 spec<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/text-align\" rel=\"noopener\">MDN<\/a><\/li>\n<\/ul>\n<h3>Related Properties<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-align-last\/\">text-align-last<\/a><\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<p>For left, right, center, justify:<\/p>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\"><span>Chrome<\/span><\/th>\n<th class=\"safari\"><span>Safari<\/span><\/th>\n<th class=\"firefox\"><span>Firefox<\/span><\/th>\n<th class=\"opera\"><span>Opera<\/span><\/th>\n<th class=\"ie\"><span>IE<\/span><\/th>\n<th class=\"android\"><span>Android<\/span><\/th>\n<th class=\"iOS\"><span>iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">3.5+<\/td>\n<td class=\"yep\">3+<\/td>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">Any<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>For the <code>start<\/code> and <code>end<\/code> values:<\/p>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\"><span>Chrome<\/span><\/th>\n<th class=\"safari\"><span>Safari<\/span><\/th>\n<th class=\"firefox\"><span>Firefox<\/span><\/th>\n<th class=\"opera\"><span>Opera<\/span><\/th>\n<th class=\"ie\"><span>IE<\/span><\/th>\n<th class=\"android\"><span>Android<\/span><\/th>\n<th class=\"iOS\"><span>iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">3.1+<\/td>\n<td class=\"yep\">3.6+<\/td>\n<td class=\"nope\">None<\/td>\n<td class=\"nope\">None<\/td>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">Any<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>The text-align property in CSS is used for aligning the inner content of a block element. p { text-align: center; } These are the traditional values for text-align: left &#8211; The default value. Content aligns along the left side. right &#8211; Content aligns along the right side. center &#8211; Content centers between the left and [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13949,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-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":196786,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-align-last\/","url_meta":{"origin":14110,"position":0},"title":"text-align-last","date":"February 26, 2015","format":false,"excerpt":"text-align-last lets you control the alignment of the last (or only) line of text right before a forced line break \u2014 for example the end of a paragraph or the line right before a tag. .intro-graph { text-align-last: center; } At the time of this writing, only Mozilla browsers and\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":335691,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-self\/","url_meta":{"origin":14110,"position":1},"title":"place-self","date":"March 2, 2021","format":false,"excerpt":"The place-self property in CSS is shorthand for the align-self and justify-self properties, combining them into a single declaration in CSS Grid and Flexbox layouts, where align-self and justify-self (CSS Grid only) are values that align an individual item in the block and inline directions. .element { place-self: center start;\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":340540,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-content\/","url_meta":{"origin":14110,"position":2},"title":"place-content","date":"May 13, 2021","format":false,"excerpt":"The place-content property in CSS is shorthand for the align-content and justify-content properties, combining them into a single declaration in CSS Grid and Flexbox layouts, where align-content and justify-content are values that align an individual item in the block and inline directions. .element { display: flex; place-content: start space-evenly; }\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14132,"url":"https:\/\/css-tricks.com\/almanac\/properties\/v\/vertical-align\/","url_meta":{"origin":14110,"position":3},"title":"vertical-align","date":"September 6, 2011","format":false,"excerpt":"The vertical-align property in CSS controls how elements set next to each other on a line are lined up. img { vertical-align: middle; } In order for this to work, the elements need to be set along a baseline. As in, inline (e.g. , ) or inline-block (e.g. as set\u2026","rel":"","context":"In \"vertical-align\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":343682,"url":"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/","url_meta":{"origin":14110,"position":4},"title":"A Complete Guide to CSS Grid","date":"May 12, 2021","format":false,"excerpt":"Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.","rel":"","context":"In \"grid\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/grid-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":336695,"url":"https:\/\/css-tricks.com\/almanac\/properties\/j\/justify-self\/","url_meta":{"origin":14110,"position":5},"title":"justify-self","date":"March 18, 2021","format":false,"excerpt":"The justify-self property in CSS sets the justification of an element within its containing block. Its behavior depends on the display of the containing block. For example, if the containing block is a grid container (i.e. display: grid), we can justify the element in it along the \"inline\" axis (which,\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14110"}],"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\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14110"}],"version-history":[{"count":11,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14110\/revisions"}],"predecessor-version":[{"id":264333,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14110\/revisions\/264333"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13949"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14110"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}