Question
vertical-align: middle;
Center Up and Down using margin , padding, position ...
How to vertically align an image inside div ?
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:
Comments