First, let's first describe how the content in the CSS table is centered:
Let's start by introducing a property that will allow the table to be centered in the CSS style.
text-align : This property sets the horizontal alignment of the text.
Let's go into a complete example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP Chinese Network</title>
<style type="text/css">
Table,td{text-align:center;border-style:solid}
</style>
</head>
<body>
<table style="width:200px;height:150px">
<tr><td>11</td><td>22</td></tr>
<tr><td>22</td><td>44</td></tr>
</table>
</body>
</html>
Is it obvious? Of course, the red box inside is drawn when I take a screenshot. Don't pay attention to these details. Let us see if these texts are displayed in the middle. This effect is still very obvious, so our first test was successful.
Now let's take a look at the second one:
What is the second one? It is that our text should not have only one kind of centered function. The text-align attribute has two other values, namely:
Text-align:right: The function of right alignment will show the effect on the right side.
Text-align:center: Needless to say, this centered property has just been tested.
Text-align:left: Left-aligned function, the displayed effect will be displayed on the left side. This is the effect of the default text. Generally, few people set this. The default is this, then what are you setting up, wasting space. (To see more knowledge about css attributes, go to the css reference manual in the PHP Chinese website)
Now I have to go into an instance again, this time I said the three together code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP Chinese Network</title>
<style type="text/css">
Table,td{border-style:solid;}
.zuo_1{text-align:left;}
.you_1{text-align:right;}
.zhong_1{text-align:center;}
</style>
</head>
<body>
<table style="width:200px;height:150px">
<tr class="zuo_1"><td>11</td><td>22</td></tr>
<tr class="you_1"><td>22</td><td>44</td></tr>
<tr class="zhong_1"><td>33</td><td>66</td></tr>
</table>
</body>
</html>
This is a complete code. The above has added a class name in all three directions. Now they all have different directions. They feel that they are all off. Although they look different, the meaning can be obvious. display.
The first is equivalent to the default on the left, the second on the right, and the third in the middle. The effect is still very obvious, this is the usage of our text-align attribute.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
