Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of how to control the center of elements in div in css, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value, I believe you will have something to gain after reading this article on how to control the center of elements in div in css, let's take a look.

Row-level elements are centered in div

The code is as follows:

Navigation menu

Requirements: will

And label center

Answer: div is a block-level element, and img and span are inline elements. So this problem boils down to the problem of the centering of inline elements in block-level elements.

The code is as follows:

# treeTitle {

Background: url. / images/bj.png)

Height: 30px

Color: white

Text-align: left

Line-height: 30px

}

# treeTitle img {

Vertical-align: middle

}

Line-height is the line height, which refers to the distance between the baselines of text lines.

The inline element generates an inline box, which is just a concept that cannot be displayed, but it does exist. When there are no other factors, the inline box is equal to the content area, while setting the line height can increase or decrease the height of the inline box, that is, divide the value of line spacing (line height-font size) by 2 to the upper and lower sides of the content area, as shown in the following figure:

Because row heights can be applied to any element, several elements within the same row may have different row heights and inline box heights. A row box is a virtual rectangle of the row whose height is equal to the maximum row height of all elements in the row. When there are multiple lines of content, each line has its own line box.

When the content contains a picture, if the height of the picture is greater than the line height, the line frame containing the picture line will be supported by the height of the picture. Although the picture opens the row box, it does not affect the row height, so it does not affect other properties calculated based on the row height. When a line contains a picture, the vertical alignment of the picture and text defaults to the baseline alignment. So when the following code is not added, the picture and text are aligned at the bottom.

The code is as follows:

# treeTitle img {

Vertical-align: middle

}

The effect is shown in the following figure:

This is the end of the article on "how to control the center of elements in div in css". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to control the center of elements in css". If you want to learn more, you are 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.