Home > Article > Web Front-end > How to center the text in td with css
How to center the text in td with css
- WBOYOriginal
- 2021-12-03 16:11:1513909browse
Method: 1. Use the "text-align" attribute to center the text in the TD horizontally. The syntax is "text-align:center;"; 2. Use the "vertical-align" attribute to make the text in the TD vertical. Displayed in the center, the syntax is "vertical-align:middle;".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to center the text in td in css
In css, you can use the text-align and vertical-align attributes to set td The text in is displayed in the center, the text-align attribute is used to set the horizontal alignment of the element, and the vertical-align attribute is used to set the vertical alignment of the element.
When the value of the text-align attribute is center, it means that the element is displayed in the horizontal center. When the value of the vertical-align attribute is middle, it means that the element is displayed in the vertical center.
The example is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
td{
height:100px;
width:50px;
text-align:center;
vertical-align:middle;
}
</style>
<table border="1">
<tr>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>666</td>
</tr>
<tr>
<td>777</td>
<td>888</td>
</tr>
</table>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to center the text in td with css. For more information, please follow other related articles on the PHP Chinese website!