{"id":18565,"date":"2020-06-26T02:37:45","date_gmt":"2020-06-26T09:37:45","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=18565"},"modified":"2020-12-29T11:50:30","modified_gmt":"2020-12-29T19:50:30","slug":"css-vertical-align","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-vertical-align\/","title":{"rendered":"CSS Vertical Align Property"},"content":{"rendered":"\n<p>When writing CSS, you may encounter a situation where you would like to change how an element is aligned on the page. In this article, we will explore the CSS property and the property values that will alter how an element is vertically aligned.<\/p>\n\n\n\n<p>The syntax for the property is as follows:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>vertical-align: property-value;<\/pre><\/div>\n\n\n\n<p>where property-value can include any of the following options: baseline, length, sub, super, top, text-top, middle, bottom, text-bottom, initial, or inherit.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Property Values<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"766\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/goran-ivos-idmvPhF8t4E-unsplash-1.jpg\" alt=\"MacBook Air next to a teapot and mug.\" class=\"wp-image-18567\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/goran-ivos-idmvPhF8t4E-unsplash-1.jpg 1020w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/goran-ivos-idmvPhF8t4E-unsplash-1-768x577.jpg 768w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/goran-ivos-idmvPhF8t4E-unsplash-1-770x578.jpg 770w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/goran-ivos-idmvPhF8t4E-unsplash-1-20x15.jpg 20w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/goran-ivos-idmvPhF8t4E-unsplash-1-385x289.jpg 385w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/><figcaption> Let\u2019s discuss how each property value changes the element alignment. <\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">baseline<\/h3>\n\n\n\n<p>The `baseline` property value is the default, in which the element is aligned with the parent element\u2019s baseline.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">length<\/h3>\n\n\n\n<p>The `length` property value raises or lowers the element by a specified length, whether that length is denoted in centimeters, pixels or ems. The element will be raised if the value is positive, and lowered if the value is negative. Similarly, the element can be raised or lowered using a positive or negative percentage.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">sub<\/h3>\n\n\n\n<p>The `sub` property value aligns the element with the subscript baseline of the parent element, which is lower than the default.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">super<\/h3>\n\n\n\n<p>The `super` property value aligns the element with the superscript baseline of the parent element, which is higher than the default.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">top<\/h3>\n\n\n\n<p>The `top` property value aligns the element with the top of the highest element on the line.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">text-top<\/h3>\n\n\n\n<p>The `text-top` property value aligns the element with the top of the text used in the parent element.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">middle<\/h3>\n\n\n\n<p>The `middle` property value aligns the element in the center of the parent element.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">bottom<\/h3>\n\n\n\n<p>The `bottom` property value aligns the element with the lowest element on the line.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">text-bottom<\/h3>\n\n\n\n<p>The `text-bottom` property value aligns the element with the bottom of the text used in the parent element.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">initial<\/h3>\n\n\n\n<p>The `initial` property value sets the property to its original value.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">inherit<\/h3>\n\n\n\n<p>The `inherit` property value gets its alignment properties from the parent element.<br><\/p>\n\n\n\n<p>Those are all of the property values and their effects on alignment! What property values have you implemented in your CSS?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>In this article, we discussed how to vertically align an element on a page using CSS. If you\u2019re new to CSS, check out our introductory articles, <a href=\"https:\/\/careerkarma.com\/blog\/what-is-css\/\">What is CSS? An Intro to Cascading Style Sheets<\/a> and <a href=\"https:\/\/careerkarma.com\/blog\/beginners-guide-to-css\/\">Beginner&#8217;s Guide to Learning CSS<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"When writing CSS, you may encounter a situation where you would like to change how an element is aligned on the page. In this article, we will explore the CSS property and the property values that will alter how an element is vertically aligned. The syntax for the property is as follows: vertical-align: property-value; where&hellip;","protected":false},"author":77,"featured_media":18566,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-18565","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v27.0) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS Vertical Align Property: A Step By Step Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"How many CSS vertical-align property values can you name? In this article, we\u2019re discussing what each value accomplishes.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-vertical-align\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Vertical Align Property\" \/>\n<meta property=\"og:description\" content=\"How many CSS vertical-align property values can you name? In this article, we\u2019re discussing what each value accomplishes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-vertical-align\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-26T09:37:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T19:50:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"752\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christina Kopecky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-vertical-align\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-vertical-align\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"CSS Vertical Align Property\",\"datePublished\":\"2020-06-26T09:37:45+00:00\",\"dateModified\":\"2020-12-29T19:50:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-vertical-align\/\"},\"wordCount\":385,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-vertical-align\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-vertical-align\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-vertical-align\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/css-vertical-align\/\",\"name\":\"CSS Vertical Align Property: A Step By Step Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-vertical-align\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-vertical-align\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg\",\"datePublished\":\"2020-06-26T09:37:45+00:00\",\"dateModified\":\"2020-12-29T19:50:30+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"How many CSS vertical-align property values can you name? In this article, we\u2019re discussing what each value accomplishes.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-vertical-align\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-vertical-align\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-vertical-align\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg\",\"width\":1020,\"height\":752,\"caption\":\"An open computer with an image on the screen.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-vertical-align\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/careerkarma.com\/blog\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Vertical Align Property\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\/\/www.linkedin.com\/in\/cmvnk\"],\"url\":\"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Vertical Align Property: A Step By Step Guide | Career Karma","description":"How many CSS vertical-align property values can you name? In this article, we\u2019re discussing what each value accomplishes.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/css-vertical-align\/","og_locale":"en_US","og_type":"article","og_title":"CSS Vertical Align Property","og_description":"How many CSS vertical-align property values can you name? In this article, we\u2019re discussing what each value accomplishes.","og_url":"https:\/\/careerkarma.com\/blog\/css-vertical-align\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-06-26T09:37:45+00:00","article_modified_time":"2020-12-29T19:50:30+00:00","og_image":[{"width":1020,"height":752,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-vertical-align\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-vertical-align\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"CSS Vertical Align Property","datePublished":"2020-06-26T09:37:45+00:00","dateModified":"2020-12-29T19:50:30+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-vertical-align\/"},"wordCount":385,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-vertical-align\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-vertical-align\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-vertical-align\/","url":"https:\/\/careerkarma.com\/blog\/css-vertical-align\/","name":"CSS Vertical Align Property: A Step By Step Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-vertical-align\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-vertical-align\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg","datePublished":"2020-06-26T09:37:45+00:00","dateModified":"2020-12-29T19:50:30+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"How many CSS vertical-align property values can you name? In this article, we\u2019re discussing what each value accomplishes.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-vertical-align\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-vertical-align\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-vertical-align\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg","width":1020,"height":752,"caption":"An open computer with an image on the screen."},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-vertical-align\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Vertical Align Property"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18565","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=18565"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18565\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/18566"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=18565"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=18565"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=18565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}