Static Block centered offset

  


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" title="text/css">
* .grandContainer {
  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>

1.	'margin-left' Example
2.	margin-left: auto
3.	margin-left: 25%
4.	margin-left: 10px
5.	margin-left: 8px;
6.	Set margin left and right to auto
7.	Set margin-left and margin-right
8.	margin-left setting for UL
9.	LI margin-left: 10%
10.	A paragraph with a margin-left set at 20%
11.	margin can be positive or negative.
12.	A percentage margin refers to a percentage of the containing block's width.
13.	Left aligned and offset
14.	Right aligned and offset
15.	Aligned and Offset Absolute
16.	Left-bottom Aligned and Offset
17.	Aligned Outside with large negative margin value
18.	Sized Absolute left offset
19.	Shrinkwrapped Absolute left offset
20.	Stretched Absolute left offset
21.	three pixel offset by margin

Static Block centered offset : margin left « CSS « HTML / CSS

Related examples in the same category