What is the style of html text centering?-HTML Tutorial-php.cn

What is the style of html text centering?

青灯夜游

Release： 2023-01-03 09:24:21

Original

18674 people have browsed it

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;".

What is the style of html text centering?

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>

Copy after login

Rendering:

What is the style of html text centering?

[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>

Copy after login

Effect picture:

What is the style of html text centering?

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>

Copy after login

What is the style of html text centering?

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!