Center Static Block in HTML and CSS
Description
The following code shows how to center Static Block.
Example
<html>
<head>
<style type="text/css" title="text/css">
* .grandContainer {<!--from w w w .ja v a2s. c o m-->
position: relative;
height: 295px;
width: 600px;
border: 2px solid black;
background: red;
}
* .parent {
margin: 10px;
padding: 10px;
padding-top: 0;
border: 1px solid black;
background: purple;
}
* .ex {
padding: 5px;
border: 5px solid black;
}
* .ex span {
margin-left: -40px;
}
#ss {
position: static;
text-align: center;
margin-top: 5px;
width: auto;
margin-left: 90px;
margin-right: 10px;
background-color: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent
<div class="parent">Non-positioned Parent
<div id="ss" class="ex"><span>Stretched Static Block: 40px</span></div>
</div>
</div>
</body>
</html>
The code above generates the following result.
...
Top-left Absolute positioned element in HTM...
Use absolute positioning to center a box on...
Use absolute position inside relative posit...
Use absolute position with bottom and left ...
Use absolute position with bottom and left ...
Use absolute position with bottom and right...
Use absolute position with top and left set...
Use absolute position with top and left to ...
Use absolute position with top and right se...
Use absolute position with top right bottom...
Use absolute position with width settings i...
Use bottom to align the bottom side of an a...
Top Align Static Block in HTML and CSS
Top offset Static Block in HTML and CSS
Align Center for static block in HTML and C...
Align Left and top for Static Block in HTML...
Align Right for static block in HTML and CS...
Bottom Align Static Block with margin-botto...
Right align Sized Static Block in HTML and ...
Stretch Static Block right alignment in HTM...
Place Sized Relative layout block in HTML a...
Position block to the bottom right of the r...
Use negative value in left for relative pos...
Use position relative with top and left val...
Use relative position with top and left in ...
Use relative position with top and left set...
Use relative position with top and left: va...
Clear after floating element in HTML and CS...
Clear right for above float right element i...
Compare clear both with not clear elements ...
Make a new line br to clear right in HTML a...
Make element clear from the both side in HT...
Make element overlap with clear left for fl...
Do center alignment in HTML and CSS
Do Left-top Alignment in HTML and CSS
Do Right-bottom Alignment in HTML and CSS
...
Top-left Absolute positioned element in HTM...
Use absolute positioning to center a box on...
Use absolute position inside relative posit...
Use absolute position with bottom and left ...
Use absolute position with bottom and left ...
Use absolute position with bottom and right...
Use absolute position with top and left set...
Use absolute position with top and left to ...
Use absolute position with top and right se...
Use absolute position with top right bottom...
Use absolute position with width settings i...
Use bottom to align the bottom side of an a...
Top Align Static Block in HTML and CSS
Top offset Static Block in HTML and CSS
Align Center for static block in HTML and C...
Align Left and top for Static Block in HTML...
Align Right for static block in HTML and CS...
Bottom Align Static Block with margin-botto...
Center Static Block in HTML and CSS
Left Align Sized Static Block with margin-r...Right align Sized Static Block in HTML and ...
Stretch Static Block right alignment in HTM...
Place Sized Relative layout block in HTML a...
Position block to the bottom right of the r...
Use negative value in left for relative pos...
Use position relative with top and left val...
Use relative position with top and left in ...
Use relative position with top and left set...
Use relative position with top and left: va...
Clear after floating element in HTML and CS...
Clear right for above float right element i...
Compare clear both with not clear elements ...
Make a new line br to clear right in HTML a...
Make element clear from the both side in HT...
Make element overlap with clear left for fl...
Do center alignment in HTML and CSS
Do Left-top Alignment in HTML and CSS
Do Right-bottom Alignment in HTML and CSS
...