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:1718597browse

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>

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>

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>

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn