[{"data":1,"prerenderedAt":37},["Reactive",2],{"blog-post-markdown-text-alignment":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":15,"related":16},"markdown-text-alignment","Markdown Text Alignment Guide","Learn how to align text in Markdown using HTML tags and table syntax for left, right, and center text alignment in this straightforward guide.","Markdown is lightweight markup language that offers simplicity alongside a bunch of powerful features. One of such features is text alignment. While originally, Markdown doesn't support text…","2024-07-14","Tutorial","Matthew Rathbone","Markdown text alignment",2,"\u003Cp>Markdown is lightweight markup language that offers simplicity alongside a bunch of powerful features. One of such features is text alignment. While originally, Markdown doesn't support text alignment explicitly, we often need to adjust the alignment of our text when writing documentation. This tutorial is all about explaining different ways to align your text in Markdown. We will cover left alignment, right alignment, and center alignment.\u003C/p>\n\u003Ch3 id=\"aligning-text-in-markdown\">Aligning Text in Markdown\u003C/h3>\n\u003Cp>Markdown does not natively support text alignment. However, we can use HTML ways within our Markdown to align our text. Remember, good markdown rendering softwares should be able to interpret simple HTML.\u003C/p>\n\u003Ch4 id=\"left-alignment\">Left Alignment\u003C/h4>\n\u003Cp>By default, all the text in Markdown is left-aligned. You do not need to do anything special to left-align your text. However, if you want to explicitly mention it, you can use \u003Ccode><p align="left">\u003C/code> HTML tag.\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span> \u003Cspan class=\"hljs-attr\">align\u003C/span>=\u003Cspan class=\"hljs-string\">"left"\u003C/span>>\u003C/span>\u003C/span>Your text here\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>This code will render as follows:\u003C/p>\n\u003Cp align=\"left\">Your text here\u003C/p>\n\n\u003Ch4 id=\"right-alignment\">Right Alignment\u003C/h4>\n\u003Cp>Right alignment can be achieved by using the \u003Ccode><p align="right">\u003C/code> HTML tag.\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span> \u003Cspan class=\"hljs-attr\">align\u003C/span>=\u003Cspan class=\"hljs-string\">"right"\u003C/span>>\u003C/span>\u003C/span>Your text here\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>This code will render as follows:\u003C/p>\n\u003Cp align=\"right\">Your text here\u003C/p>\n\n\u003Ch4 id=\"center-alignment\">Center Alignment\u003C/h4>\n\u003Cp>Center alignment can be achieved by using the \u003Ccode><p align="center">\u003C/code> HTML tag.\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span> \u003Cspan class=\"hljs-attr\">align\u003C/span>=\u003Cspan class=\"hljs-string\">"center"\u003C/span>>\u003C/span>\u003C/span>Your text here\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>This code will render as follows:\u003C/p>\n\u003Cp align=\"center\">Your text here\u003C/p>\n\n\u003Ch3 id=\"aligning-text-in-tables\">Aligning Text in Tables\u003C/h3>\n\u003Cp>When creating tables in markdown, you can specify the alignment of each column. The alignment is determined by colons \u003Ccode>:\u003C/code> in the table header. \u003C/p>\n\u003Cul>\n\u003Cli>Use it on the left to align text to the left,\u003C/li>\n\u003Cli>Use it on the right to align text to the right,\u003C/li>\n\u003Cli>Use it on both sides for center alignment.\u003C/li>\n\u003C/ul>\n\u003Cp>In the following table, the text in the columns will be: \u003Ccode>left-aligned\u003C/code>, \u003Ccode>right-aligned\u003C/code>, and \u003Ccode>center-aligned\u003C/code> respectively.\u003C/p>\n\u003Cpre>\u003Ccode>| Left Align | Right Align | Center Align |\n| :--- | ---: | :---: |\n| Cell 1A | Cell 1B | Cell 1C |\n| Cell 2A | Cell 2B | Cell 2C |\n\u003C/code>\u003C/pre>\u003Cp>This code will render as follows:\u003C/p>\n\u003Cdiv class=\"table-responsive\">\u003Ctable class=\"table\">\n\u003Cthead>\n\u003Ctr>\n\u003Cth align=\"left\">Left Align\u003C/th>\n\u003Cth align=\"right\">Right Align\u003C/th>\n\u003Cth align=\"center\">Center Align\u003C/th>\n\u003C/tr>\n\u003C/thead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd align=\"left\">Cell 1A\u003C/td>\n\u003Ctd align=\"right\">Cell 1B\u003C/td>\n\u003Ctd align=\"center\">Cell 1C\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd align=\"left\">Cell 2A\u003C/td>\n\u003Ctd align=\"right\">Cell 2B\u003C/td>\n\u003Ctd align=\"center\">Cell 2C\u003C/td>\n\u003C/tr>\n\u003C/tbody>\u003C/table>\u003C/div>\n\u003Cp>That's it! Now you are adept in manipulating markdown for text alignment. Remember Markdown is not only about writing content but also about designing that content for a better user experience. For even more ways to get the most out of Markdown, check out our \u003Ca href=\"/blog/markdown-table-ultimate-guide\">'Ultimate Guide'\u003C/a> on the subject. Happy writing!\u003C/p>\n",[],[],[17,25,31],{"slug":18,"title":19,"description":20,"excerpt":20,"date":21,"category":9,"author":22,"keywords":23,"readingMinutes":24},"how-to-center-text-in-markdown","How to center text in Markdown","Markdown is a simple markup language that allows for easy formatting of text. It is commonly used for creating README files, documentation, and other types of text-based content. One common task…","2022-12-08","Matthew Rathbone (with help from OpenAI)","3/8/2023",1,{"slug":26,"title":27,"description":28,"excerpt":28,"date":29,"category":9,"author":22,"keywords":30,"readingMinutes":24},"how-to-bold-text-in-markdown","How to bold text in Markdown","Markdown is a lightweight markup language that is used to format text documents. It is often used for creating README files, documentation, and other types of text content. One of the features of…","2022-12-01","3/1/2023",{"slug":32,"title":33,"description":34,"excerpt":34,"date":35,"category":9,"author":22,"keywords":36,"readingMinutes":24},"how-to-underline-text-in-markdown","How to underline text in Markdown","Markdown is a lightweight markup language that is used to format text documents. One of the features of Markdown is the ability to format text, such as underlining it.","2022-11-22","3/22/2023",1792184940602]