{"id":4042,"date":"2017-02-10T08:50:14","date_gmt":"2017-02-10T13:50:14","guid":{"rendered":"http:\/\/local.brightwhiz\/?p=4042"},"modified":"2021-12-08T13:16:23","modified_gmt":"2021-12-08T18:16:23","slug":"center-text-in-html","status":"publish","type":"post","link":"http:\/\/local.brightwhiz\/center-text-in-html\/","title":{"rendered":"Four Different Ways to Center Text in HTML"},"content":{"rendered":"\n<p>There are several clever ways to center text in <a href=\"\/\/local.brightwhiz\/tag\/html\/\">HTML<\/a> or at least simulate that text has been centered. For the purpose of this guide, we have left out these clever hacks and focused on the features that were designed to do this.<\/p>\n\n\n\n<p>We will therefore be looking at two major ways that you can center text in HTML. The first includes using the HTML tags and HTML attributes on block elements, The second uses the more preferred <a href=\"\/\/local.brightwhiz\/tag\/css\/\">CSS<\/a> properties.<\/p>\n\n\n\n<p>These methods will affect not just text but other elements such as images, video, other containers, and objects depending on the element that is being centered and whether it supports child elements or not.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Center Text in HTML Without Using CSS<\/h2>\n\n\n\n<p>The first is using the deprecated <strong>&lt;center><\/strong> tag. It was deprecated in HTML 4 and should not be used. We are making mention of it for those still using HTML 4.x and just for historical purposes. This tag does not work in HTML5 as you would expect. The tag can be used as a custom HTML5 container and can be styled accordingly using CSS. So please do not use it.<\/p>\n\n\n\n<p><strong>Usage:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;center&gt;This text will be centered&lt;\/center&gt;<\/code><\/pre>\n\n\n\n<p>The second method we will see here is using the deprecated align attribute of block tags such as <strong>&lt;div&gt;<\/strong>. Again this was deprecated in HTML 4 and will not work in HTML5. We have gone and included it here for the same reasons as the <strong>&lt;center&gt;<\/strong> tag.<\/p>\n\n\n\n<p><strong>Usage:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;div align=&quot;center&quot;&gt;\n &lt;p&gt;This text will be centered&lt;\/p&gt;\n&lt;\/div&gt; <\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Using the Modern CSS Methods<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Inline CSS<\/h3>\n\n\n\n<p>The first method we will look at involves using inline CSS directly into the HTML tags. This method is not recommended because it is somewhat of a maintenance nightmare in more practical website projects. Best practice states that designers separate CSS from HTML and content. Nevertheless, it is perfectly legal to use it and beneficial in some scenarios. One such reason you would want to use inline CSS is when formatting HTML emails. This method takes advantage of the style attribute in HTML tags.<\/p>\n\n\n\n<p><strong>Usage:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;p style=&quot;text-align:center;&quot;&gt;This text will be centered&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2. CSS in Style Tags<\/h3>\n\n\n\n<p>It may be more efficient to style multiple blocks with a single rule. In this case, inline CSS may not be ideal So you would need to place your styles in an external CSS file or in &lt;style> tags at the head of your HTML page. You can either style the tag by tag name, by class name, or by id as shown below.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;style&gt;\n \/* styles by tags*\/\n  p {\n   text-align:center;\n  }\n\n \/* styles by class*\/\n  .centerbyclass {\n   text-align:center;\n  }\n\n \/* styles by id*\/\n  #centerbyid {\n   text-align:center;\n  }\n\n&lt;\/style&gt;\n\n&lt;p&gt;This text will be centered&lt;\/p&gt;\n\n&lt;p class=&quot;centerbyclass&quot;&gt;This text will be centered&lt;\/p&gt;\n\n&lt;p id=&quot;centerbyid&quot;&gt;This text will be centered&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>In practical terms, the rules above will override the previous ones if they are applied to matching HTML elements. There you have it, the way to center text in HTML.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are several clever ways to center text in HTML or at least simulate that text has been centered. For the purpose of this guide, we have left out these&#8230;<\/p>\n","protected":false},"author":1,"featured_media":4043,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,23],"tags":[170,303,320,543,635,637],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Center Text in HTML in Four Different Ways<\/title>\n<meta name=\"description\" content=\"Here&#039;s how you can center text in HTML using four different ways based on convenience, practicality and current web design trends\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/local.brightwhiz\/center-text-in-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Center Text in HTML in Four Different Ways\" \/>\n<meta property=\"og:description\" content=\"Here&#039;s how you can center text in HTML using four different ways based on convenience, practicality and current web design trends\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.brightwhiz\/center-text-in-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Brightwhiz.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brightwhiz\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-10T13:50:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-08T18:16:23+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Center-Text-in-HTML.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Michael Bright\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:site\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Bright\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/local.brightwhiz\/center-text-in-html\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/center-text-in-html\/\"},\"author\":{\"name\":\"Michael Bright\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\"},\"headline\":\"Four Different Ways to Center Text in HTML\",\"datePublished\":\"2017-02-10T13:50:14+00:00\",\"dateModified\":\"2021-12-08T18:16:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/center-text-in-html\/\"},\"wordCount\":442,\"commentCount\":0,\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/center-text-in-html\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Center-Text-in-HTML.jpg\",\"keywords\":[\"CSS\",\"HTML\",\"Internet\",\"Software Design\",\"Web\",\"Web Design\"],\"articleSection\":[\"Articles\",\"Guides\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\/\/local.brightwhiz\/center-text-in-html\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.brightwhiz\/center-text-in-html\/\",\"url\":\"http:\/\/local.brightwhiz\/center-text-in-html\/\",\"name\":\"How to Center Text in HTML in Four Different Ways\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/center-text-in-html\/#primaryimage\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/center-text-in-html\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Center-Text-in-HTML.jpg\",\"datePublished\":\"2017-02-10T13:50:14+00:00\",\"dateModified\":\"2021-12-08T18:16:23+00:00\",\"description\":\"Here's how you can center text in HTML using four different ways based on convenience, practicality and current web design trends\",\"breadcrumb\":{\"@id\":\"http:\/\/local.brightwhiz\/center-text-in-html\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.brightwhiz\/center-text-in-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/center-text-in-html\/#primaryimage\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Center-Text-in-HTML.jpg\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Center-Text-in-HTML.jpg\",\"width\":1200,\"height\":630,\"caption\":\"Center Text in HTML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.brightwhiz\/center-text-in-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.brightwhiz\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Four Different Ways to Center Text in HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/local.brightwhiz\/#website\",\"url\":\"http:\/\/local.brightwhiz\/\",\"name\":\"Brightwhiz.com\",\"description\":\"Best Tech guides, Tutorials, and News\",\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/local.brightwhiz\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/local.brightwhiz\/#organization\",\"name\":\"Brightwhiz\",\"url\":\"http:\/\/local.brightwhiz\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"width\":706,\"height\":135,\"caption\":\"Brightwhiz\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/brightwhiz\/\",\"https:\/\/x.com\/brightwhizmag\",\"https:\/\/instagram.com\/bright_whiz\/\",\"https:\/\/www.pinterest.com\/sobbayi\/\",\"https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ\"]},{\"@type\":\"Person\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\",\"name\":\"Michael Bright\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"contentUrl\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"caption\":\"Michael Bright\"},\"sameAs\":[\"https:\/\/sobbayi.com\"],\"url\":\"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Center Text in HTML in Four Different Ways","description":"Here's how you can center text in HTML using four different ways based on convenience, practicality and current web design trends","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":"http:\/\/local.brightwhiz\/center-text-in-html\/","og_locale":"en_US","og_type":"article","og_title":"How to Center Text in HTML in Four Different Ways","og_description":"Here's how you can center text in HTML using four different ways based on convenience, practicality and current web design trends","og_url":"http:\/\/local.brightwhiz\/center-text-in-html\/","og_site_name":"Brightwhiz.com","article_publisher":"https:\/\/www.facebook.com\/brightwhiz\/","article_published_time":"2017-02-10T13:50:14+00:00","article_modified_time":"2021-12-08T18:16:23+00:00","og_image":[{"width":1200,"height":630,"url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Center-Text-in-HTML.jpg","type":"image\/jpeg"}],"author":"Michael Bright","twitter_card":"summary_large_image","twitter_creator":"@brightwhizmag","twitter_site":"@brightwhizmag","twitter_misc":{"Written by":"Michael Bright","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/local.brightwhiz\/center-text-in-html\/#article","isPartOf":{"@id":"http:\/\/local.brightwhiz\/center-text-in-html\/"},"author":{"name":"Michael Bright","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32"},"headline":"Four Different Ways to Center Text in HTML","datePublished":"2017-02-10T13:50:14+00:00","dateModified":"2021-12-08T18:16:23+00:00","mainEntityOfPage":{"@id":"http:\/\/local.brightwhiz\/center-text-in-html\/"},"wordCount":442,"commentCount":0,"publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"image":{"@id":"http:\/\/local.brightwhiz\/center-text-in-html\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Center-Text-in-HTML.jpg","keywords":["CSS","HTML","Internet","Software Design","Web","Web Design"],"articleSection":["Articles","Guides"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/local.brightwhiz\/center-text-in-html\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/local.brightwhiz\/center-text-in-html\/","url":"http:\/\/local.brightwhiz\/center-text-in-html\/","name":"How to Center Text in HTML in Four Different Ways","isPartOf":{"@id":"http:\/\/local.brightwhiz\/#website"},"primaryImageOfPage":{"@id":"http:\/\/local.brightwhiz\/center-text-in-html\/#primaryimage"},"image":{"@id":"http:\/\/local.brightwhiz\/center-text-in-html\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Center-Text-in-HTML.jpg","datePublished":"2017-02-10T13:50:14+00:00","dateModified":"2021-12-08T18:16:23+00:00","description":"Here's how you can center text in HTML using four different ways based on convenience, practicality and current web design trends","breadcrumb":{"@id":"http:\/\/local.brightwhiz\/center-text-in-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.brightwhiz\/center-text-in-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/center-text-in-html\/#primaryimage","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Center-Text-in-HTML.jpg","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Center-Text-in-HTML.jpg","width":1200,"height":630,"caption":"Center Text in HTML"},{"@type":"BreadcrumbList","@id":"http:\/\/local.brightwhiz\/center-text-in-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.brightwhiz\/"},{"@type":"ListItem","position":2,"name":"Four Different Ways to Center Text in HTML"}]},{"@type":"WebSite","@id":"http:\/\/local.brightwhiz\/#website","url":"http:\/\/local.brightwhiz\/","name":"Brightwhiz.com","description":"Best Tech guides, Tutorials, and News","publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/local.brightwhiz\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/local.brightwhiz\/#organization","name":"Brightwhiz","url":"http:\/\/local.brightwhiz\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","width":706,"height":135,"caption":"Brightwhiz"},"image":{"@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/brightwhiz\/","https:\/\/x.com\/brightwhizmag","https:\/\/instagram.com\/bright_whiz\/","https:\/\/www.pinterest.com\/sobbayi\/","https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ"]},{"@type":"Person","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32","name":"Michael Bright","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/","url":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","contentUrl":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","caption":"Michael Bright"},"sameAs":["https:\/\/sobbayi.com"],"url":"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/"}]}},"_links":{"self":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/4042"}],"collection":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/comments?post=4042"}],"version-history":[{"count":0,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/4042\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media\/4043"}],"wp:attachment":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media?parent=4042"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/categories?post=4042"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/tags?post=4042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}