How to center the font in css?-CSS Tutorial-php.cn

How to center the font in css?

青灯夜游

Release： 2019-05-23 18:52:49

Original

46798 people have browsed it

How to set the font to be centered in css? The following article will introduce it to you, I hope it will be helpful to you.

How to center the font in css?

1. CSS sets the font to be horizontally centered

You can use the text-align attribute in CSS to Set the font to be centered horizontally. This property specifies the horizontal alignment of the text within the element, by using the center value to center the text.

text-align is a basic attribute that affects how lines of text in an element are aligned with each other. The values left, right, and center will cause the text in the element to be left-aligned, right-aligned, and centered respectively. If you want to center the text, just use center.

This attribute sets the centering of some inline objects (or similar elements) such as text and img tags.

This attribute has the following characteristics:

1) The center of text-align is applied to a container. It only targets the text in the container and the display in the container is inline or inline. -Block container, if the display of the container inside is block, the content of the container inside will not be centered.

2), text-align is downwardly transitive and will continue to be passed to child elements. If you set a div, the content in its child divs will also be centered.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 水平居中</title>
		<style>
			.box {
				width: 400px;
				height: 100px;
				background: #ddd;
				text-align:center;
			}
		</style>
	</head>
	<body>
		<div class="box">css 水平居中了--文本文字</div>
	</body>

</html>

Copy after login

Rendering:

How to center the font in css?

2. CSS setting font vertical centering

1. The line-height attribute makes the text vertically centered --- single line font
# #

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    height: 300px;
			    background: #ddd;
			    line-height:300px;
			}
		</style>
	</head>
	<body>
		<div class="box">css 垂直居中了--文本文字</div>
	</body>
</html>

Copy after login

Rendering:

How to center the font in css?

This will allow the text in the div to be centered horizontally and vertically

2. CSS3 flex layout to vertically center the text

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    height: 300px;
			    background: #ddd;
			    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

Rendering:

How to center the font in css?

#3、vertical-align:middle display :table-cell Center the text vertically

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box {
				width: 300px;
				height: 300px;
				background: #ddd;
				vertical-align:middle;
				display:table-cell;
			}
		</style>

	</head>

	<body>

		<div class="box">css 水平居中了--文本文字,文本文字,文本文字,文本文字,文本文字,文本文字。</div>

	</body>

</html>

Copy after login

Rendering:

Description: vertical-align :middle display:table-cell can center both single-line text and multi-line text. However, because table-cell is an inline type, it will cause the original block-level elements to be moved to the same row per div. If you need to divide the rows into two rows, you need to add an additional container outside to control the position.
The above is the detailed content of How to center the font in css?. For more information, please follow other related articles on the PHP Chinese website!