{"id":18857,"date":"2020-07-01T11:36:23","date_gmt":"2020-07-01T18:36:23","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=18857"},"modified":"2020-12-29T13:03:43","modified_gmt":"2020-12-29T21:03:43","slug":"html-center-text","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/html-center-text\/","title":{"rendered":"Centering Text in HTML"},"content":{"rendered":"\n

How to Center Text in HTML<\/h2>\n\n\n\n

One of the first things we learn as programmers is how to align blocks of text. In this article, we\u2019ll take a look at how to align text in the center of your container using the style and align attributes. <\/p>\n\n\n\n

Style Attributes<\/h2>\n\n\n\n

When we are working with a div in html, we can use the style attribute to incorporate inline-styling. We\u2019ll use the CSS property text-align<\/code> to center our text in the <div><\/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 with Style Attribute<\/title>\n<\/head>\n<body>\n   <div class="container" style="text-align:center;">\n       <p>Text to center<\/p>\n   <\/div>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
Align Attributes<\/h2>\n\n\n\n
We can use align attributes when we are working with tables in HTML. It will only work on <col><\/code>, <colgroup><\/code>, <tbody><\/code>, <td><\/code>, <tfoot><\/code>, <th><\/code>, <thead><\/code>, <tr><\/code> elements.
<\/p>\n\n\n\n
<!DOCTYPE html>\n   <head>\n       <meta http-equiv="Content-Type" content="text\/html; charset=iso-8859-1">\n       <title>Center with Align Attribute<\/title>\n   <\/head>\n   <body>\n       <table border=1 width="800" align="center">\n           <tr>\n             <th>Month<\/th>\n             <th>Savings<\/th>\n           <\/tr>\n           <tr align="center">\n             <td>January<\/td>\n             <td>$100<\/td>\n           <\/tr>\n           <tr align="center">\n             <td>February<\/td>\n             <td>$80<\/td>\n           <\/tr>\n         <\/table>\n   <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
The big thing to remember when you are learning to center text is that the alignment depends on the container it’s in. If the container only takes up half the page, it\u2019ll center itself across the length of that container and not the whole page. 
<\/p>\n\n\n\n
That\u2019s all there is to it! You now know how to center text across a <div><\/code> element and <table><\/code> elements. <\/p>\n","protected":false},"excerpt":{"rendered":"How to Center Text in HTML One of the first things we learn as programmers is how to align blocks of text. In this article, we\u2019ll take a look at how to align text in the center of your container using the style and align attributes.  Style Attributes When we are working with a div…","protected":false},"author":77,"featured_media":18090,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17281],"tags":[],"class_list":{"0":"post-18857","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"HTML","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"\nCentering Text in HTML: A Step-By-Step Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"One of the first things new developers learn to do is center text inside a container. Learn how to do this in tables and divs on Career Karma.\" \/>\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\/html-center-text\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Centering Text in HTML\" \/>\n<meta property=\"og:description\" content=\"One of the first things new developers learn to do is center text inside a container. Learn how to do this in tables and divs on Career Karma.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/html-center-text\/\" \/>\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-01T18:36:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T21:03:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/07\/kelly-sikkema-YK0HPwWDJ1I-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\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\/html-center-text\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-center-text\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"Centering Text in HTML\",\"datePublished\":\"2020-07-01T18:36:23+00:00\",\"dateModified\":\"2020-12-29T21:03:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-center-text\/\"},\"wordCount\":173,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-center-text\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/07\/kelly-sikkema-YK0HPwWDJ1I-unsplash.jpg\",\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/html-center-text\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/html-center-text\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/html-center-text\/\",\"name\":\"Centering Text in HTML: A Step-By-Step Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-center-text\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-center-text\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/07\/kelly-sikkema-YK0HPwWDJ1I-unsplash.jpg\",\"datePublished\":\"2020-07-01T18:36:23+00:00\",\"dateModified\":\"2020-12-29T21:03:43+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"One of the first things new developers learn to do is center text inside a container. Learn how to do this in tables and divs on Career Karma.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-center-text\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/html-center-text\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/html-center-text\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/07\/kelly-sikkema-YK0HPwWDJ1I-unsplash.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/07\/kelly-sikkema-YK0HPwWDJ1I-unsplash.jpg\",\"width\":1020,\"height\":680,\"caption\":\"Woman wearing black shirt sitting at desk, working on computer\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/html-center-text\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML\",\"item\":\"https:\/\/careerkarma.com\/blog\/html\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Centering Text in HTML\"}]},{\"@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":"Centering Text in HTML: A Step-By-Step Guide | Career Karma","description":"One of the first things new developers learn to do is center text inside a container. Learn how to do this in tables and divs on Career Karma.","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\/html-center-text\/","og_locale":"en_US","og_type":"article","og_title":"Centering Text in HTML","og_description":"One of the first things new developers learn to do is center text inside a container. Learn how to do this in tables and divs on Career Karma.","og_url":"https:\/\/careerkarma.com\/blog\/html-center-text\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-07-01T18:36:23+00:00","article_modified_time":"2020-12-29T21:03:43+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/07\/kelly-sikkema-YK0HPwWDJ1I-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\/html-center-text\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/html-center-text\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"Centering Text in HTML","datePublished":"2020-07-01T18:36:23+00:00","dateModified":"2020-12-29T21:03:43+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/html-center-text\/"},"wordCount":173,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/html-center-text\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/07\/kelly-sikkema-YK0HPwWDJ1I-unsplash.jpg","articleSection":["HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/html-center-text\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/html-center-text\/","url":"https:\/\/careerkarma.com\/blog\/html-center-text\/","name":"Centering Text in HTML: A Step-By-Step Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/html-center-text\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/html-center-text\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/07\/kelly-sikkema-YK0HPwWDJ1I-unsplash.jpg","datePublished":"2020-07-01T18:36:23+00:00","dateModified":"2020-12-29T21:03:43+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"One of the first things new developers learn to do is center text inside a container. Learn how to do this in tables and divs on Career Karma.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/html-center-text\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/html-center-text\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/html-center-text\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/07\/kelly-sikkema-YK0HPwWDJ1I-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/07\/kelly-sikkema-YK0HPwWDJ1I-unsplash.jpg","width":1020,"height":680,"caption":"Woman wearing black shirt sitting at desk, working on computer"},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/html-center-text\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML","item":"https:\/\/careerkarma.com\/blog\/html\/"},{"@type":"ListItem","position":3,"name":"Centering Text in HTML"}]},{"@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\/18857","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=18857"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18857\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/18090"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=18857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=18857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=18857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}