How CSS pictures are centered vertically in div

the role of Vertical-align:middle;

This article focuses on writing down the role of Vertical-align:middle;

1, using the margin property for horizontal alignment

<! DOCTYPE html>
2. Use of Vertical-align:middle property:
Let's take a look at the definition of Vertical-align on the consortium: the Vertical-align property sets the vertical alignment of the element. This property defines the vertical alignment of the baseline of an element in the row relative to the baseline of the row in which the element is located. Allows you to specify a negative length value and a percentage value. This causes the elements to be reduced rather than elevated. In a table cell, this property sets the alignment of the contents of the cell in the Cell box.


It must be admitted that I read it for a long time to understand the meaning of the horse, and my understanding is that it has two uses:

First, look at the next sentence. In a table cell, this property sets the alignment of the contents of the cell in the Cell box. "It's easy to understand that if you give a table TD a Vertical-align:middle style, the contents of the table will be centered vertically, and the same if you give a vertical-align:bottom, the bottom is aligned, If you give a vertical-align:top, it will snap to the top.

Second use, look at the previous page "This property defines the vertical alignment of the baseline of the element in the row with respect to the baseline of the row in which the element is located." "Professional language I will not say, you can make a metaphor: suppose there are two inline elements a and b,a and B are IMG, when a adds a vertical-align:middle style, B's bottom (baseline) will align A's middle position, the following figure:



If both A and B add a vertical-align:middle style, they align each other's middle position, i.e. they align vertically with the centerline, as shown in the following figure:



If I want Class= "img404" 's img to be vertically centered in the class= "wall" div, I can add a span empty tag to the Div, set its height to 100%, and give it a vertical-align:middle style, Also give IMG a vertical-align:middle style, then the IMG can be centered vertically within the div. As shown in figure:

Next is my demo:

Center The logo vertically:

The HTML file looks like this:


<! DOCTYPE html> The CSS styles are as follows:

html,body {
background-color: #eff3f5;
}
div {
    display:block;
}

#ajax-hook {
position:fixed;
top:0;
z-index:99999;
width:100%
}
. login_wrap{
	background-color: #1F72B4;
	height:650px;
	Width:1423px
}
. login_title{
	background-color: #53B232;
	height:120px;
	Width:1423px
}            
. CL {
zoom:1;
}
. Login_middle {             
position:relative;
padding:25px 0 0 0;
Z-index:5
}
. login_footer{
	background-color: #DD4F43;
	height:120px;
	Width:1423px
}
. LOG-HD {
    border:1px solid red;
    height:120px;
    position:relative;
    Background-color: #EFF3F5;
WPL {
    border:1px solid red;
    width:100%
}
. log-logo{
	width:50%;
	height:120px;
	margin:0 Auto;
	border:1px solid red;
logo-img{
	border:1px solid red;
	Vertical-align:middle;
}
span{
	height:100%;
	Display:inline-block;
	Vertical-align:middle;
}
The effect chart is as follows:


This is just a little bit of my practice time, follow-up knowledge to continue to add.