<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Center<\/title>\n <style>\n .div-class {\n text-align: center;\n background-color: lightblue;\n }\n button {\n width: 200px;\n }\n <\/style>\n<\/head>\n<body>\n <div class="div-class">\n <p>I'm a paragraph<\/p>\n <button>I'm a submit button<\/button>\n <div>I'm a div<\/div>\n <p>And all the text is being centered by text-align: center<\/p>\n \n <\/div>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\nCenter Align Block Elements:<\/h2>\n\n\n\n
Centering block elements is best illustrated by using the <body><\/code> tag of an HTML document. What you need to do is control the width of the overall container and then set the margin to auto:
<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Center<\/title>\n <style>\n body {\n width: 800px;\n margin: auto;\n background: darkcyan;\n color: white;\n font-family: 'roboto';\n padding: 20px;\n }\n .div-class {\n text-align: center;\n background-color: lightblue;\n color: black;\n }\n button {\n width: 200px;\n }\n \n <\/style>\n<\/head>\n<body>\nI'm the top of the body. I control the width of the app container (in this case 800px) and can center the whole app by using <strong>margin: auto<\/strong>. If you wanted to center <strong>this<\/strong> text, use text-align: center<\/strong>\n <div class="div-class">\n <p>I'm a paragraph<\/p>\n <button>I'm a submit button<\/button>\n <div>I'm a div<\/div>\n <p>And all the text is being centered by <strong>text-align: center<\/strong><\/p>\n <\/div>\n \n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\nCenter Align Image:<\/h2>\n\n\n\n
To center an image, in the CSS selector, change your display to block and then control the width of the image element, using %<\/code> or px<\/code>. Set margin<\/code> to auto<\/code>:
<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Center<\/title>\n <style>\n body {\n width: 800px;\n margin: auto;\n background: darkcyan;\n color: white;\n font-family: 'Roboto';\n padding: 20px;\n }\n .div-class {\n text-align: center;\n background-color: lightblue;\n color: black;\n }\n button {\n width: 200px;\n }\nimg {\n display: block;\n margin: 20px auto;\n width: 50%;\n }\n \n \n <\/style>\n<\/head>\n<body>\nI'm the top of the body. I control the width of the app container (in this case 800px) and can center the whole app by using <strong>margin: auto<\/strong>. If you wanted to center <strong>this<\/strong> text, use text-align: center<\/strong>\n <div class="div-class">\n <p>I'm a paragraph<\/p>\n <button>I'm a submit button<\/button>\n <div>I'm a div<\/div>\n <p>And all the text is being centered by <strong>text-align: center<\/strong><\/p>\n <\/div>\n <p style="margin: auto; width: 400px;">To center image below, change display to block and then set margins to auto, control the width using px or %<\/p>\n <img src="http:\/\/www.placekitten.com\/500\/301" alt="kittens"\/>\n \n \n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\nCenter Vertically and Horizontally in a Div:<\/h2>\n\n\n\npadding:<\/h4>\n\n\n\n
To center vertically in a <div><\/code>, there are several ways to do it. First, and probably the easiest, is to adjust the padding in your <div><\/code> \u2013 you can then use text-align: center <\/code>to center the paragraph horizontally:\u00a0\u00a0
<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Center<\/title>\n <style>\n body {\n width: 800px;\n margin: auto;\n background: darkcyan;\n color: white;\n font-family: 'Roboto';\n padding: 20px;\n }\n .div-class {\n text-align: center;\n background-color: lightblue;\n color: black;\n }\n button {\n width: 200px;\n }\nimg {\n display: block;\n margin: 20px auto;\n width: 50%;\n }\n \n \n <\/style>\n<\/head>\n<body>\nI'm the top of the body. I control the width of the app container (in this case 800px) and can center the whole app by using <strong>margin: auto<\/strong>. If you wanted to center <strong>this<\/strong> text, use text-align: center<\/strong>\n <div class="div-class">\n <p>I'm a paragraph<\/p>\n <button>I'm a submit button<\/button>\n <div>I'm a div<\/div>\n <p>And all the text is being centered by <strong>text-align: center<\/strong><\/p>\n <\/div>\n <p style="margin: auto; width: 400px;">To center image below, change display to block and then set margins to auto, control the width using px or %<\/p>\n <img src="http:\/\/www.placekitten.com\/500\/301" alt="kittens"\/>\n \n \n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\n<\/p>\n\n\n\n
line-height:<\/h4>\n\n\n\n
You can also set line-height to the height of the block element you are centering in conjunction with text-align: center to align the element to the center. If you have multiple lines, use line-height on both parent and child and add vertical-align: middle<\/code> and display: inline-block <\/code>to the child:
<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Center<\/title>\n <style>\n body {\n width: 800px;\n margin: auto;\n background: darkcyan;\n color: white;\n font-family: 'roboto';\n padding: 20px;\n }\n #vertical-center-lineheight {\n line-height: 200px;\n border: 5px double ivory;\n text-align: center;\n margin-bottom: 20px;\n }\n \n \n <\/style>\n<\/head>\n<body>\n <div id="vertical-center-lineheight">\n <p>I am vertically centered and horizontally centered in a div using lineheight and text-align: center.<\/p>\n <\/div>\n <div id="vertical-center-lh-multiple">\n <p>I am vertically centered and horizontally centered in a div using lineheight, display: inline-block, and vertical-align: middle. Use me when you have multiple lines of text to center across horizontal and vertical axes. <\/p>\n <\/div>\n \n \n \n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\n<\/p>\n\n\n\n
transform:<\/h4>\n\n\n\n
Another way you can center elements is by using position and transform. Set the parent element to position: relative, the child element to absolute positioning. The child element will need to be positioned at the top and left at 50% and then we use the transform property to adjust the text in the div. We\u2019ll talk more about this property in another post so it\u2019s all right if it\u2019s not 100 percent clear at the moment:
<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Center<\/title>\n <style>\n body {\n width: 800px;\n margin: auto;\n background: darkcyan;\n color: white;\n font-family: 'roboto';\n padding: 20px;\n }\n #vertical-center-transform {\n height: 200px;\n position: relative;\n border: 5px double ivory;\n margin-bottom: 20px;\n \n }\n #vertical-center-transform p {\n margin: 0;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n <\/style>\n<\/head>\n<body>\n <div id="vertical-center-transform">\n <p>I am vertically centered and horizontally centered in a div using transform. Text is <strong>NOT<\/strong> center aligned.<\/p>\n <\/div> \n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\n<\/p>\n\n\n\n
flexbox:<\/h4>\n\n\n\n
Lastly, we can center elements by using flexbox. Set display: flex to the parent element of the children you would like to center and then use align-items and justify-content to center it:
<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Center<\/title>\n <style>\n body {\n width: 800px;\n margin: auto;\n background: darkcyan;\n color: white;\n font-family: 'roboto';\n padding: 20px;\n }\n #vertical-center-flexbox {\n height: 200px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 5px double ivory;\n }\n <\/style>\n<\/head>\n<body>\n <div id="vertical-center-flexbox">\n <p>I am vertically and horizontally centered in a div using flexbox.<\/p>\n <\/div>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\n<\/p>\n\n\n\n
These are the most common ways you can solve the problem of centering your elements in your layout.
<\/p>\n","protected":false},"excerpt":{"rendered":"In this CSS tutorial, we will go over how to center text and block elements. There are several tricks you can use to center elements horizontally and vertically in a layout. Center Align Text Elements To center align text inside a larger element, use text-align: center; as seen below: <!DOCTYPE html> <html lang="en"> <head> <meta…","protected":false},"author":77,"featured_media":18890,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-18840","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":"\n
CSS Tutorial: CSS Center Text and Blocks<\/title>\n<meta name=\"description\" content=\"Text-align, margin and vertical-align are all ways we can use CSS to center content in a block element. Find out more about these properties here.\" \/>\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-center\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Center Elements With CSS Using Text-Align, Margins and More\" \/>\n<meta property=\"og:description\" content=\"Text-align, margin and vertical-align are all ways we can use CSS to center content in a block element. Find out more about these properties here.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-center\/\" \/>\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-07-01T07:19:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-07-24T11:01:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/black-board-bright-bullseye-226569.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\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=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-center\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-center\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"Center Elements With CSS Using Text-Align, Margins and More\",\"datePublished\":\"2020-07-01T07:19:56+00:00\",\"dateModified\":\"2020-07-24T11:01:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-center\/\"},\"wordCount\":342,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-center\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/black-board-bright-bullseye-226569.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-center\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-center\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/css-center\/\",\"name\":\"CSS Tutorial: CSS Center Text and Blocks\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-center\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-center\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/black-board-bright-bullseye-226569.jpg\",\"datePublished\":\"2020-07-01T07:19:56+00:00\",\"dateModified\":\"2020-07-24T11:01:04+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"Text-align, margin and vertical-align are all ways we can use CSS to center content in a block element. Find out more about these properties here.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-center\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-center\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-center\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/black-board-bright-bullseye-226569.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/black-board-bright-bullseye-226569.jpg\",\"width\":1000,\"height\":750},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-center\/#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\":\"Center Elements With CSS Using Text-Align, Margins and More\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & 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 Tutorial: CSS Center Text and Blocks","description":"Text-align, margin and vertical-align are all ways we can use CSS to center content in a block element. Find out more about these properties here.","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-center\/","og_locale":"en_US","og_type":"article","og_title":"Center Elements With CSS Using Text-Align, Margins and More","og_description":"Text-align, margin and vertical-align are all ways we can use CSS to center content in a block element. Find out more about these properties here.","og_url":"https:\/\/careerkarma.com\/blog\/css-center\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-07-01T07:19:56+00:00","article_modified_time":"2020-07-24T11:01:04+00:00","og_image":[{"width":1000,"height":750,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/black-board-bright-bullseye-226569.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":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-center\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-center\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"Center Elements With CSS Using Text-Align, Margins and More","datePublished":"2020-07-01T07:19:56+00:00","dateModified":"2020-07-24T11:01:04+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-center\/"},"wordCount":342,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-center\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/black-board-bright-bullseye-226569.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-center\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-center\/","url":"https:\/\/careerkarma.com\/blog\/css-center\/","name":"CSS Tutorial: CSS Center Text and Blocks","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-center\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-center\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/black-board-bright-bullseye-226569.jpg","datePublished":"2020-07-01T07:19:56+00:00","dateModified":"2020-07-24T11:01:04+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"Text-align, margin and vertical-align are all ways we can use CSS to center content in a block element. Find out more about these properties here.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-center\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-center\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-center\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/black-board-bright-bullseye-226569.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/black-board-bright-bullseye-226569.jpg","width":1000,"height":750},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-center\/#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":"Center Elements With CSS Using Text-Align, Margins and More"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & 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\/18840","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=18840"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18840\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/18890"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=18840"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=18840"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=18840"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}