{"id":14132,"date":"2011-09-06T18:59:38","date_gmt":"2011-09-07T01:59:38","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14132"},"modified":"2020-02-29T06:47:16","modified_gmt":"2020-02-29T13:47:16","slug":"vertical-align","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/v\/vertical-align\/","title":{"rendered":"vertical-align"},"content":{"rendered":"<p>The <code>vertical-align<\/code> property in CSS controls how elements set next to each other on a line are lined up. <\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">img {\r\n  vertical-align: middle;\r\n}<\/code><\/pre>\n<p>In order for this to work, the elements need to be set along a baseline. As in, <code>inline<\/code> (e.g. <code>&lt;span&gt;<\/code>, <code>&lt;img&gt;<\/code>) or <code>inline-block<\/code> (e.g. as set by the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/d\/display\/\"><code>display<\/code><\/a> property) elements. <\/p>\n<p>The valid values are:<\/p>\n<ul>\n<li><code>baseline<\/code> &#8211; This is the default value.<\/li>\n<li><code>top<\/code> &#8211; Align the top of the element and its descendants with the top of the entire line.<\/li>\n<li><code>bottom<\/code> &#8211; Align the bottom of the element and its descendants with the bottom of the entire line.<\/li>\n<li><code>middle<\/code> &#8211; Aligns the middle of the element with the middle of lowercase letters in the parent.<\/li>\n<li><code>text-top<\/code> &#8211; Aligns the top of the element with the top of the parent element&#8217;s font<\/li>\n<li><code>text-bottom<\/code> &#8211; Aligns the bottom of the element with the bottom of the parent element&#8217;s font.<\/li>\n<li><code>sub<\/code> &#8211; Aligns the baseline of the element with the subscript-baseline of its parent. Like where a <code>&lt;sub&gt;<\/code> would sit.<\/li>\n<li><code>super<\/code> &#8211; Aligns the baseline of the element with the superscript-baseline of its parent. Like where a <code>&lt;sup&gt;<\/code> would sit.<\/li>\n<li><code>length<\/code> &#8211; Aligns the baseline of the element at the given length above the baseline of its parent. (e.g. px, %, em, rem, etc.)<\/li>\n<\/ul>\n<p>You can <a href=\"http:\/\/codepen.io\/chriscoyier\/pen\/oJeAK\" rel=\"noopener\">see examples<\/a> of each here:<\/p>\n<pre class=\"codepen\" data-height=\"640\" style=\"height: 640px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-type=\"result\" data-href=\"oJeAK\" data-user=\"chriscoyier\" data-safe=\"true\"><code><\/code><a href=\"http:\/\/codepen.io\/chriscoyier\/pen\/oJeAK\" rel=\"noopener\">Check out this Pen!<\/a><\/pre>\n<p>A common use case is lining up an avatar with a username. To get them centered along a line, you&#8217;d use <code>vertical-align: middle;<\/code>. Although note that it centers the text according to its tallest ascender and deepest descender.<\/p>\n<figure id='post-20491 media-20491' class='align-none'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/vert-align.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>Each element lines up according to the line you&#8217;ve set, which doesn&#8217;t change from element to element. So, you can mix-and-match which elements have which value &#8211; the elements don&#8217;t affect each other.<\/p>\n<p><strong>Note that vertical-align is useful on table-cell elements as well,<\/strong> aligning the content within them. Sticking to top, middle, and bottom is the best bet though, as the other values have inconsistent cross-browser results.<\/p>\n<figure id='post-20508 media-20508' class='align-none'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/topandbottom.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<h3>More Information<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/what-is-vertical-align\/\">What is vertical-align?<\/a><\/li>\n<li>This property does not allow you to &#8220;vertically center&#8221; an element within another element. Flexbox is more of the proper tool there. However, <a href=\"https:\/\/css-tricks.com\/centering-in-the-unknown\/\">there is a trick<\/a> involving a pseudo &#8220;ghost&#8221; element that can allow this to work.<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/vertical-align\" rel=\"noopener\">MDN<\/a><\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\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\">4+<\/td>\n<td class=\"yep\">4+<\/td>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">Any<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<figure id='post-20492 media-20492' class='align-none'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/vert-align-cross-browser.jpg' alt='' data-recalc-dims=\"1\" \/><figcaption>Fairly consistent across browsers old and new, assuming the font is the same.<\/figcaption><\/figure>\n<p>Note that some replace elements (e.g. <code>&lt;textarea&gt;<\/code>) are inline, but their baseline isn&#8217;t specified, so behavior may vary from browser to browser.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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. &lt;span&gt;, &lt;img&gt;) or inline-block (e.g. as set by the display property) elements. [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13953,"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":[1152],"acf":[],"jetpack-related-posts":[{"id":335691,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-self\/","url_meta":{"origin":14132,"position":0},"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":14132,"position":1},"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":262713,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-items\/","url_meta":{"origin":14132,"position":2},"title":"place-items","date":"November 29, 2017","format":false,"excerpt":"The place-items property in CSS is shorthand for the align-items and justify-items properties, combining them into a single declaration. A common usage is doing horizontal and vertical centering with Grid: .center-inside-of-me { display: grid; place-items: center; } These properties have gained use with the introduction of Flexbox and Grid layouts,\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":336695,"url":"https:\/\/css-tricks.com\/almanac\/properties\/j\/justify-self\/","url_meta":{"origin":14132,"position":3},"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":[]},{"id":343682,"url":"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/","url_meta":{"origin":14132,"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":326605,"url":"https:\/\/css-tricks.com\/almanac\/properties\/j\/justify-items\/","url_meta":{"origin":14132,"position":5},"title":"justify-items","date":"December 2, 2020","format":false,"excerpt":"The justify-items property is a sub-property of the CSS Box Alignment Module which basically controls the alignment of grid items within their scope. .element { justify-items: center; } justify-items aligns grid items along the row (inline) axis. Specifically, this property allows you to set alignment for items inside a grid\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\/14132"}],"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=14132"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14132\/revisions"}],"predecessor-version":[{"id":254648,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14132\/revisions\/254648"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13953"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14132"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}