Home > Article > Web Front-end > What is the style of html text centering?
What is the style of html text centering?
- 青灯夜游Original
- 2021-02-22 14:48:1718610browse
html Text centering style: 1. Horizontal centering style is “text-align: center;”; 2. Text vertical centering style is “line-height:px value;”; 3. Text vertical centering style is “ display: flex;align-items: center;".
The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.
html text center
1. Text horizontally centered--text-align: center;
The text-align attribute specifies the horizontal alignment of text within an 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.
| Value | Description |
|---|---|
| left | Allow text to the left. Default: determined by the browser. |
| right | Arrange text to the right. |
| center | Arrange the text to the center. |
| justify | Achieve the effect of aligning text on both ends. |
| inherit | Specifies that the value of the text-align attribute should be inherited from the parent element. |
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
h1 {
text-align: center
}
h2 {
text-align: left
}
h3 {
text-align: right
}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
</body>
</html>Rendering:
[Recommended Tutorials: CSS Video Tutorial, "html Video Tutorial"】
2, text vertically centered
1), line-height makes a single line of text vertically centered
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: palegoldenrod;
line-height:300px;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字</div>
</body>
</html>Effect picture:
2), CSS3 flex layout makes the text vertically centered
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: paleturquoise;
line-height:300px;
/*设置为伸缩容器*/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/*垂直居中*/
-webkit-box-align: center;/*旧版本*/
-moz-box-align: center;/*旧版本*/
-ms-flex-align: center;/*混合版本*/
-webkit-align-items: center;/*新版本*/
align-items: center;/*新版本*/
}
</style>
</head>
<body>
<div class="box">css 垂直居中--文本文字（弹性布局）</div>
</body>
</html>
For more programming-related knowledge, please visit: Programming Video! !
The above is the detailed content of What is the style of html text centering?. For more information, please follow other related articles on the PHP Chinese website!