How to center the font in css?

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.

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.

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

Rendering:

2. CSS setting font vertical centering

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

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

Rendering:

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

2. CSS3 flex layout to vertically center the text

      
  
css 垂直居中--文本文字（弹性布局）
  

Rendering:

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

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

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!