How to center text in css

Methods for text centering: 1. Use the "text-align:center;" statement to set horizontal centering; 2. Use CSS3's flex layout to set vertical centering; 3. Use "vertical-align:middle;display: table-cell;" statement sets vertical centering.

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

css sets the text to be horizontally centered

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

text-align syntax:

text-align : left | right | center | justify

text-align parameter value and description:

• left : left Alignment

• right : Right alignment

• center : Center

• justify : Justify both ends ( Not recommended, usually not used by most browsers)

Our commonly used parameter values for text-align are left, right, center

The attributes are as follows Features:

1). The center of text-align is applied to a container. It only targets the text in the container and the container whose display is inline or inline-block. If the display of the container inside is inline or inline-block, block, the contents 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.

Example:

      
  
css文本文字--水平居中
  

Rendering:

(Learning video sharing:css video tutorial)

css set text to be vertically centered

1. CSS3 flex layout to vertically center text

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

Rendering:

##2. vertical-align:middle display:table-cell Center the text vertically

      
  
css 文本文字--水平居中
  

Rendering:

Description: vertical-align:middle display:table-cell can enable single-line text and multi-line text All centered. 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.

For more programming related knowledge, please visit:

Programming Video! !

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!