Absolute centered : span « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. span

Absolute centered

   


<!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;
}

#myStyle {
  position: absolute;
  text-align: center;
  top: 0;
  margin-top: 200px;
  width: auto;
  left: 0;
  margin-left: 110px;
  right: 0;
  margin-right: 30px;
  background-color: gold;
}

</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
    <span id="myStyle" >absoluted centered.</span> 
  </div>
</div> 
</body>
</html>








Related examples in the same category

1.'span' Example
2.span line-height: 0.6em;
3.span display: none;
4.span float: right;
5.span inside a h2
6.Empty span with background image
7.Using span to highlight one letter
8.Using span to create author part of a quotation
9.Using span to highlight
10.Span inside a DIV
11.Span padding: 0 57px;
12.Span color: #786B50;
13.Span display: block;
14.Span float: left;
15.Span letter-spacing: 6px;
16.Span width: 1000px;
17.Span position: absolute;
18.Span top: 206px;
19.Span left: 86px;
20.Span color: #140A00
21.Let DIV span two columns
22.span with class selector
23.span padding: 0 10px;
24.span background: mistyrose;
25.span float left
26.span border: 1px solid rgb(200, 200, 200);
27.span background: rgb(244, 244, 244);
28.span background: white;
29.span border: 1px solid black;
30.Using span to create quotation
31.span.color {color:#FF0000;}
32.Capital first letter with span
33.Style a letter with span
34.Inline style for Span
35.The span element can be used to group inline elements only.
36.span with id style
37.Inline Spacer
38.Inline Decoration solid
39.Inline Decoration by border
40.Inline Decoration with image
41.span in a h2 with absolute position
42.SPAN in anchor
43.Span in a H2
44.Shrinkwrapped SPAN by setting both width and height to auto
45.Horizontally Stretched Absolute SPAN
46.Line break with margin top
47.Default line space with margin 0
48.One and half Line break with margin-top: 1.5em
49.Invisible inline horizontal rule: a line-break.
50.Double-border inline horizontal rule.
51.Background inline horizontal rule with image
52.Combination Inline horizontal rule.
53.Use SPAN to style Blocked area