htmlMethods to center text: 1. Set the text to be centered horizontally through the "text-align:center;" attribute; 2. Set the text to be vertically centered through the "line-height:height;" attribute.
The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.
The specific example of the html text centering code is as follows:
<!DOCTYPE HTML>
<html>
<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 >html文字水平居中</div>
<div >html文字垂直居中</div>
<div >html文字水平上下居中</div>
</body>
</html>The effect of the above code is tested locally as shown below:
Remember these key points , in HTML, the css code to center the text:
1. Horizontal centering: text-align:center; The
text-align attribute specifies the horizontal alignment of the text in the element.
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.
【Recommended learning: html video tutorial】
The above is the detailed content of How to center text in html. 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)
