Example of CSS controlling the center of elements in Div

div row-level element centered

The

code is as follows:


<div class= "Treetitle" >


<img src= "Images/app.png"/>


<span> navigation Menu </span>


</div>

Requirements: Center and <span> labels

Solution: DIV for block-level elements, IMG and span are inline elements. So this problem comes down to the center of the inline element in the block-level element.

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 row height, which refers to the distance between the baselines of the line of text.

Inline elements generate a inline box, which is just a concept that cannot be displayed, but it does exist. In the absence of other factors, the inline box equals the content area, and a set row height increases or decreases the height of the inline box, that is, by dividing the value of the line spacing (row height-font size) by 2, to the top and bottom sides of the content area, as shown below:

Because row heights can be applied to any element, several elements within the same row may have different row heights and a high inline frame. A row box is a virtual rectangular box that is the height of the highest value for all elements within the bank. When there are multiple lines of content, each row has its own row box.
When the content contains pictures, if the height of the picture is greater than the row height, then the row box containing the picture line will be propped up the height of the avenue picture. Although the picture is stretched to a row box, it does not affect the row height and therefore does not affect other properties that are computed based on row heights. When a row 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;


}

About Line-height here is a very good blog explanation, Line-height detailed, the effect as shown in the following figure: