This article mainly introduces how to write HTML text centering code. Hope it helps friends in need.
The specific example of the html text centering code is as follows:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>html文字居中测试</title>
<meta charset="UTF-8">
<style type="text/css">
body{background: #ddd;}
div{width:300px;height:180px;margin:10px auto;color:#fff;font-size:24px;}
.box1{background: #71a879;text-align: center;}
.box2{background: #6a8bbc;line-height: 200px;}
.box3{background: #dea46b;text-align: center;line-height: 200px;}
</style>
</head>
<body>
<div class="box1">html文字水平居中</div>
<div class="box2">html文字垂直居中</div>
<div class="box3">html文字水平上下居中</div>
</body>
</html>The effect of the above code is tested locally as shown below:
So through this article, do you have a better understanding of the relevant knowledge about HTML text centering? In fact, here we mainly remember these key points. In HTML, the css code to center the text:
1. Flat centering: text-align:center;
text-align attribute specifies the element The horizontal alignment of the text in .
This attribute sets the horizontal alignment of text within block-level elements by specifying the point at which the line box is aligned. The value justify is supported by allowing user agents to adjust the spacing between letters and words in line content; different user agents may get different results.
2. Vertical centering: line-height:height;
The line-height property sets the distance between lines (line height).
Note: Negative values are not allowed.
The above is the detailed content of How to center-align text in HTML? (code example). For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
