Formatting and styling is an important step towards making a well-structured website. While CSS is generally used to style a web page, HTML also provides a lot of options for formatting.
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.
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 “tag{}” as we have done with p{} in the example. Inside this braces we shall use the property text-align with the value as center.
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’s usage.
Here’s the code:
<html> <head> <title> How to center text using css </title> <link rel= “stylesheet” href= “center.css” > </head> <body> <p> Hi,I am centered beacauses of css file. </p> </body> </html>
The following shall be the CSS code for the above HTML code. Remember to save it in the same folder as HTML code.
CSS file name: center.css
p {
text-align:center;
color:red;
font-size:35px;
}
body {
background-color:powderblue;
}
Let us take a look at the output:
How To Center Table In CSS
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.
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 & margin-right with the values as auto. At a later stage, if you want to change the alignment from center you can simply change the value.
We shall use an example to add a table and then center it. In this example we have also used center-align method for centering the text inside the cell.
The first one is HTML code. The <link> tag shall be used to call the .css file, which is our second code.
Below is the HTML Code for our example:
<html> <head> <title> how to center a table in html </title> <link rel= “stylesheet” href= “ctable.css” > </head> <body> <div> <table id="check"> <tr id="y1"> <th> First Name </th> <th> Last Name </th> </tr> <tr id="r1"> <td> tom </td> <td> hanks </td> </tr> <tr id="g1"> <td> virat </td> <td> kohli </td> </tr> <tr id="pb1"> <td> nelson </t> <td> mandela </td> </tr> <tr id="o1"> <td> M.K. </td> <td> Gandhi </td> </tr> </table> </div> </body> </html>
CSS file name: ctable.css
table,th,td {
border:5px solid black;
border-collapse:collapse;
padding:10px;
border-color:blue;
}
tr{
text-align:center;
}
#y1{
background-color:yellow;
}
#r1{
background-color:red;
}
#g1{
background-color:green;
}
#pb1{
background-color:powderblue;
}
#o1{
background-color:orange;
}
#check{
margin-left:auto;
margin-right:auto;
}
By now you would know what the output will look like. You can explore more with your own codes at Codepen.
Output:
Conclusion:
In this tutorial, we learned how to center text in CSS and how to center table. Here’s an article for you to learn similar codes to center text and image in HTML. We have seen two different methods for aligning namely, margin-left & right and text-align. One of them is exclusively used when we want to align the text i.e., center-align.
To know more about CSS and its uses, visit our previous post! To keep learning CSS, subscribe to our blog!