Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "how to achieve div text vertical center", the content is detailed, the steps are clear, the details are handled properly, I hope this "how to achieve div text vertical center" article can help you solve your doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

1. The vertical-align attribute centers the text

There are many vertical-align values, commonly used is middle,bottom,text-bottom, etc., but when we actually use this attribute, we will find that this attribute is "not working from time to time". In some cases, we still don't see any change in img or text after adding this attribute. That's because vertical-align only works in elements such as inline-block or inline, and table-cell.

Example:

Text center

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

If there is only one line or more text to be centered vertically, it is the easiest to make, as long as the line height of the text is the same as the height of the container.

Example:

P {height:30px;line-height:30px;width:100px;overflow:hidden;}

3. Use the padding to center the text vertically.

Using the inner margin to center the text vertically is similar to using the line height to center the text vertically. it is also suitable for the vertical center of one or more lines of text.

Example:

P {padding:20px0;}

4. Use the transform of CSS3 to realize the vertical center of the text.

Example:

. center-vertical {

Position:relative

Top:50%

Transform:translateY (- 50%)

}. Center-horizontal {

Position:relative

Left:50%

Transform:translateX (- 50%)

}

5. Using flex layout to realize the vertical center of text.

Example:

.flex {/ * flex layout * /

Display:flex;/* to achieve vertical centering * /

The level of align-items:center;/* implementation is in the middle * /

Justify-content:center

Text-align:justify

Width:200px

Height:200px

Background:#000

Margin:0auto

Color:#fff

}

Read here, this "how to achieve the vertical center of div text" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more about the article, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.