{"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/"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=https://css-tricks.com/"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=https://css-tricks.com/"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/"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/"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://css-tricks.com/"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 [&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":{"_acf_changed":false,"_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":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[1152],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_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}]}}