To show n-number of div
s in one line, there are 3 approaches
use
display:table;
This method is supported IE8 and above and comes in pretty handy if you have large amount of css and text anddiv
s to alignuse
float:left;
All time favorite, the old school approach, this method is most recommended when old browser support has to be considered, requiresclear
ing of the float at the enduse
display:inline-block;
never used this method personally float method was considered instead of using this by me
Base CSS
/************Supported by IE8 and above *******************/
div.table {
width:100%; /* important */
display:table;
text-align:center;
}
.table-cell {
display:table-cell;
vertical-align:middle;
}
/************ Method 2 *******************/
div.inline {
width:100%;
display:inline-block;
text-align:center;
}
div.inline-div {
width:32%;
display:inline-block;
}
/************ Method 3 *******************/
.float-class {
width:100%;
text-align:center;
}
div.floatdiv {
float:left;
width:32%;
border:1px solid black;
}
.clearfloat {
clear:both;
}
fiddle showing all three methods in 1 place
To vertically center one line
in a div
again 3 approaches :
keep in mind, solution has to be responive, so margin-top:25% or 50%
is not gonna work!!!
line-height
this approach is usefull when the dimesnion of the parent div is known, then you can simply use the trickline-height:equal to height of parent div
position
idea is to make theparent
positionedrelative
and the text span class anabsolute
, then center theabsolute
text using positioning liketop/bottom
display:table-cell
highly recommended if IE7 and older support is not required, simply usevertical-align:middle;
Base css
div.fixed-div-height {
height:200px;
width:200px;
text-align:center;
}
div.fixed-div-height span {
line-height:200px; /* equal to height of the fixed div*/
}
div.unknown-div-height {
height:100%;
text-align:center;
position: relative;
}
div.unknown-div-height > span.unknown-div-margin {
display:inline-block;
height:20px;
position: absolute;
top: 50%;
left:0;
right:0;
}
div.for-ie8-and-above{
width:100%;
display:table;
height:400px;
text-align:center;
}
div.for-ie8-and-above > div{
height:400px;
width:100%;
display:table-cell;
vertical-align:middle; /* key here */
}
fiddle showing all three methods
To center a paragraph vertically in center
this is the tricky part
Practically there is no possible way to center
a parapgraph
whose height
and the containers
height
is unknown unless you gor for some hacks....one such hack has been quoted at the end of this answer from css tricks!!
Simplest, use :
div.table-cell {
height:400px; /* can be anything, even in percentage*/
width:100%;
display:table-cell;
vertical-align:middle; /* key here */
}
fiddle showing remaining 2 possible cases
Another solution posted here : How do I vertically center text with CSS?
IE hack for display:tables
: CSS Tricks