Home  >  Article  >  Web Front-end  >  How to center text in css

How to center text in css

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-04-15 19:17:0155250browse

Method: 1. Use the text-align attribute to set the text to be horizontally centered, the syntax "text-align:center"; 2. Use the line-height attribute to set the text to be vertically centered, the syntax "line-height: value"; 3. Use CSS3’s flex layout to center the text vertically.

How to center text in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

1. Use the text-align attribute to center the text horizontally.

The text-align attribute specifies the horizontal alignment of the text in the element. Set the text by using the center value. Centered.

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.

nbsp;html>

	
		
		css 水平居中
		
	
	
		
css 水平居中了--文本文字

Rendering:

How to center text in css

2. Use the line-height attribute to center the text vertically

line-height property sets the distance between lines (line height). Negative values ​​are not allowed.

This property affects the layout of the line box. When applied to a block-level element, it defines the minimum distance between baselines in that element rather than the maximum distance.

nbsp;html>

	
		
		css 垂直居中
		
	
	
		
css 垂直居中了--文本文字

Rendering:

How to center text in css

3. CSS3 flex layout makes the text vertically centered



    
        
        css 垂直居中
        
    
    
        
css 垂直居中--文本文字(弹性布局)

Effect:

How to center text in css

Recommended learning: css video tutorial

The above is the detailed content of How to center text in css. 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