Vertical Align - Center Up and Down

Tables

vertical-align: middle; is working in a TABLE, but not inside if a DIV

Move up/down

To move a background image (50px s=X 50px) to center of the previus line(50px to top).

1. Using Position:relative

div{
display: block;
height: 50px;
width: 50px;
position:relative;
top:-50px;
}
NOTE : This methode leave 50px space at the bottom.

2. Using matgin top

div{
display: block;
height: 50px;
width: 50px;
margin-top:-50px;
}
//NO space at the bottom

3. Align an image vertically, inside a DIV

<div>
  <img src="image.jpg"/>
</div>

div {  
    height: 300px; /*can be anything*/
    width: 300px; /*can be anything*/
    position: relative;
}
/*1st Example*/
img {  
    width: 100%;
    height: auto;
    position: absolute;  
    top: 0;  
    bottom: 0;
    margin: auto;
}
/*2nd Example*/img {  
    max-height: 100%;  
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
}

4. Self Align : Align content of a div.

Structure / Example:

<div style="height:100px;background-color:#888;"><!-- The dic to align vertically -->
    <div style="display: table;width: 100%;height: 100%;">
        <div style="display: table-cell;vertical-align: middle;">Text</div>
    </div>
</div>

 

Div Align

Align two div s (next to) like a table (same height)
.the_div_1 ,the_div_2{ display: table-cell;verticle-align:top;}
NOTE : Once set to table-cell, you can also use verticle-align: 

Verticle-Align Property

This property works with: (top, middle,bottom ...)

• Table (table td)
• div with table-cell (display: table-cell;)
• div with line-height

 

Verticle position adjustable propertys

• line-height:
• display:
• margin-top: margin-bottom:
• padding: (top & bottom)
• border: (top & bottom)
• font-size:
• verticle-align:

• position: relative /  absolute (try to avoid absolute, if using set a relative just before, except for the body)

• height:
• width (to controle overflow ....)

• overflow: