{"id":3083,"date":"2020-09-16T16:13:17","date_gmt":"2020-09-16T21:13:17","guid":{"rendered":"https:\/\/cssnewbie.com\/?p=2564"},"modified":"2020-09-16T16:13:17","modified_gmt":"2020-09-16T21:13:17","slug":"how-to-center-text-in-css","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/how-to-center-text-in-css\/","title":{"rendered":"How To Center Text In CSS?"},"content":{"rendered":"

\"How<\/p>\n

Formatting and styling is an important step towards making a\u00a0well-structured website<\/a>. While\u00a0CSS is generally used to style a web page<\/a>, HTML also provides a lot of options for formatting.<\/p>\n

Aligning the text is a vital feature of representation on a modern web page. It is generally done for aesthetics, decoration, titles, sub-titles or sometimes for emphasizing a quote. One may have their own reason to align the given text, but we shall see in this article how can we achieve it using CSS code alongside HTML.<\/p>\n

The text to be displayed on the web page can be wrapped inside many tags like <p>, <body>, <div>, <anchor>, & many more. Wherever we wish to center a text inside the tag, we can code in CSS inside \u201ctag{}\u201d as we have done with p{} in the example. Inside this braces we shall use the property text-align <\/em>with the value as center. <\/strong><\/p>\n

In the following example we have used some more properties as well,.I would encourage you to try removing those and check the output to understand it\u2019s usage.<\/p>\n

Here\u2019s the code:<\/p>\n

<html>\n  <head>\n   <title> How to center text using css <\/title>\n   <link rel= \u201cstylesheet\u201d href= \u201ccenter.css\u201d >\n  <\/head>\n  <body>\n  <p> Hi,I am centered beacauses of css file. <\/p>\n  <\/body>\n<\/html><\/pre>\n
The following shall be the CSS code for the above HTML code. Remember to save it in the same folder as HTML code.<\/p>\n
CSS file name: center.css<\/p>\n
p {\n  text-align:center;\n  color:red;\n  font-size:35px;\n}\nbody {\n  background-color:powderblue;\n}<\/pre>\n
Let us take a look at the output:<\/p>\n
\"How<\/p>\n
<\/h3>\n
How To Center Table In CSS<\/h3>\n
Now that we have seen how to center text in CSS, let us also take a look at how to center a table in CSS. Center table can be done directly in HTML with a <center> tag, but it restricts the changes required in alignment at a later stage. Hence, we prefer styling it separately in a CSS file.<\/p>\n
In order to control the alignment of a section, as we have done in <div> for the following example, we will also use properties margin-left<\/em> & margin-right <\/em>with the values as auto. At a later stage, if you want to change the alignment from center you can simply change the value.<\/p>\n
We shall use an example to add a table and then center it. In this example we have also used center-align<\/em> method for centering the text inside the cell.<\/p>\n
The first one is HTML code. The <link> tag shall be used to call the .css file, which is our second code.<\/p>\n
Below is the HTML Code for our example:<\/p>\n
<html>\n  <head>\n \u00a0\u00a0 <title> how to center a table in html <\/title>\n \u00a0\u00a0 <link rel= \u201cstylesheet\u201d href= \u201cctable.css\u201d >\n  <\/head>\n  <body>\n \u00a0\u00a0 <div>\n \u00a0\u00a0 <table id=\"check\">\n \u00a0\u00a0\u00a0\u00a0 <tr id=\"y1\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <th> First Name <\/th>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <th> Last Name <\/th>\n \u00a0\u00a0\u00a0\u00a0 <\/tr>\n \u00a0\u00a0\u00a0\u00a0 <tr id=\"r1\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td> tom <\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td> hanks <\/td>\n \u00a0\u00a0\u00a0\u00a0 <\/tr>\n \u00a0\u00a0\u00a0\u00a0 \u00a0<tr id=\"g1\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td> virat <\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td> kohli <\/td>\n \u00a0\u00a0\u00a0\u00a0 <\/tr>\n \u00a0\u00a0\u00a0\u00a0 <tr id=\"pb1\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td> nelson <\/t>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td> mandela <\/td>\n \u00a0\u00a0\u00a0\u00a0 <\/tr>\n \u00a0\u00a0 <tr id=\"o1\">\n \u00a0\u00a0\u00a0\u00a0 <td> M.K. <\/td>\n \u00a0\u00a0\u00a0\u00a0 <td> Gandhi <\/td>\n \u00a0\u00a0 <\/tr>\n \u00a0\u00a0 <\/table>\n \u00a0\u00a0 <\/div>\n  <\/body>\n<\/html>\n\n<\/pre>\n
CSS file name: ctable.css<\/p>\n
table,th,td {\n  border:5px solid black;\n  border-collapse:collapse;\n  padding:10px;\n  border-color:blue;\n}\ntr{\n\u00a0 text-align:center;\n}\n#y1{\n  background-color:yellow;\n}\n#r1{\n  background-color:red;\n}\n#g1{\n  background-color:green;\n}\n#pb1{\n  background-color:powderblue;\n}\n#o1{\n  background-color:orange;\n}\n#check{\n  margin-left:auto;\n  margin-right:auto;\n}<\/pre>\n
 <\/p>\n
By now you would know what the output will look like. You can explore more with your own codes at Codepen<\/a>.<\/p>\n
Output:<\/p>\n
\"How<\/p>\n
Conclusion:<\/h3>\n
In this tutorial, we learned how to center text in CSS and how to center table. Here\u2019s an article for you to learn similar codes to center text<\/a> and image<\/a> in HTML. We have seen two different methods for aligning namely, margin-left & right <\/em>and text-align. <\/em>One of them is exclusively used when we want to align the text i.e., center-align.<\/p>\n
To know more about CSS and its uses, visit our previous post<\/a>! To keep learning CSS, subscribe to our blog<\/a>!<\/p>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<\/p>\n
Formatting and styling is an important step towards making a\u00a0well-structured website. While\u00a0CSS is generally used to style a web page, HTML also provides a lot of options for formatting.<\/p>\n
Aligning the text is a vital feature of representation on a modern […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[168],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3083"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=3083"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3083\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}