How to center text in css

CSS is an essential part of modern page design, where text is one of the crucial elements for web pages. How to center text is a very important and basic question. In this article, we’ll walk you through how to effectively center text using CSS.

Generally speaking, there are two ways to center text: horizontal centering and vertical centering. In the following text, we will introduce these two methods separately.

1. Horizontal centering

Horizontal centering is to place the text in the center of the parent element, and requires that the blank areas on the left and right sides of the text are equal in size. Below we will introduce three implementation methods, namely using text-align, using margin and using Flexbox.

1. text-align

The text-align attribute can be applied to text block-level elements (such as p, h1-h6, etc.) to make the text align with its parent element Align to center. For example:

div {
  text-align: center;
}

The above code will align the text to the center of its containing div.

2. margin

You can also use margin to center the text. This method requires using the left and right attributes of margin, for example:

div {
  margin-left: auto;
  margin-right: auto;
}

The above code sets Left and right margins (margin), this will place the div element in the center of its parent element to achieve horizontal centering of the text.

3. Flexbox

Flexbox is a new layout mode that can easily achieve center alignment of web page text by setting the flex container and flex item properties. The following is a basic example:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

In the above code, the flex layout is set on the parent element and the justify-content attribute is set to center so that the flex items in the flex container are centered.

2. Vertical centering

Vertical centering means placing the text in the center of its parent element, and requires that the blank areas on both sides of the text are equal in size. Here are some ways to do it.

1. Use the line-height attribute

Set the line height (line-height) of the text equal to the height of the parent element to achieve vertical centering. For example:

.parent {
  height: 200px;
  line-height: 200px;
}

In the above code, setting the height of the parent element and the height of the text line to the same value (200px) can achieve vertical centering.

2. Using the vertical-align attribute

The vertical-align attribute is a common way to center row-level elements vertically. For example:

.parent {
  display: table-cell;
  vertical-align: middle;
}

In the above code, if the display attribute of the parent element is set to table-cell and the vertical-align attribute is set to middle, the text can be vertically centered.

3. Using Flexbox

Flexbox can also be used to achieve vertical centering. Here are some basic examples:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

The above code sets the height of the flex container to 200 pixels and sets the justify-content and align-items properties to center, thereby vertically centering the text.

To sum up, CSS provides us with many effective methods to achieve center alignment of text. Different situations and needs may require different approaches, but when you master these basic techniques, you will be comfortable using them in web design.

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!