Image positioned in relation to containing element : position « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. position

Image positioned in relation to containing element

  
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>CSS Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
p {
  font: 12pt arial;
}

/* positioned in relation to containing element */
img.baseline {
  vertical-align: baseline;
}

img.middle {
  vertical-align: middle;
}

img.sub {
  vertical-align: sub;
}

img.super {
  vertical-align: super;
}

img.text-top {
  vertical-align: text-top;
}

img.text-bottom {
  vertical-align: text-bottom;
}

/* positioned in relation to the line the element is part of */
img.top {
  vertical-align: top;
}

img.bottom {
  vertical-align: bottom;
}
</style>


</head>

<body>
<h2>Positioned in relation to containing element.</h2>
<p><img class="baseline" src="http://java2s.com/style/logo.png" alt="plane" width="74" height="74" />The image is vertically aligned using the value baseline</p>
<p><img class="middle" src="http://java2s.com/style/logo.png" alt="plane" width="74" height="74" />The image is vertically aligned using the value middle </p>
<p><img class="sub" src="http://java2s.com/style/logo.png" alt="plane" width="74" height="74" />The image is vertically aligned using the value sub </p>
<p><img class="super" src="http://java2s.com/style/logo.png" alt="plane" width="74" height="74" />The image is vertically aligned using the value super </p>
<p><img class="text-top" src="http://java2s.com/style/logo.png" alt="plane" width="74" height="74" />The image is vertically aligned using the value text-top </p>
<p><img class="text-bottom" src="http://java2s.com/style/logo.png" alt="plane" width="74" height="74" />The image is vertically aligned using the value text-bottom </p>
<h2>Positioned in relation to line the element is part of:</h2>
<p><img class="top" src="http://java2s.com/style/logo.png" alt="plane" width="74" height="74" />The image is vertically aligned using the value text-bottom </p>
<p><img class="bottom" src="http://java2s.com/style/logo.png" alt="plane" width="74" height="74" />The image is vertically aligned using the value text-bottom </p>

</body>
</html>








Related examples in the same category

1.'position' Example
2.position: absolute; top: 0; left: 0;
3.position: absolute; top: 0; right: 0;
4.position: absolute; bottom: 0; left: 0;
5.position: absolute; bottom: 0; right: 0;
6.position-absolute
7.position-absolute: offset
8.position absolute offset: bottom left
9.position absolute offset: bottom right
10.position absolute offset: no width no height
11.position absolute offset: right
12.position absolute offset: top right bottom left
13.position fixed
14.position relative
15.position: relative, absolute
16.position: relative;
17.position: relative; top: 25px; left: 25px;
18.position: relative; top: 10px; left: 10px;
19.Relative Positioning
20.Absolute Positioning
21.Fixed Positioning
22.Floating Positioning
23.CSS Positioning
24.HTML to demonstrate CSS positioning
25.Absolute position from the bottom
26.position: relative; top: 100px; left: 20px;
27.background-position: 75px 150px;
28.Positioning Items
29.positioned in relation to containing element
30.CSS Positioning
31.CSS positioning
32.CSS positioning 2
33.Using absolute positioning to center a box onscreen
34.The list-style property: combine three separate properties, list-style-type, list-style-image, and list-style-position
35.Elements that are absolutely positioned are positioned, by default, relative to the browser's viewport.
36.This element is positioned to the bottom right of the relatively positioned element.
37.Elements in fixed position stay in place, even when a document is scrolled and are positioned relative to the browser's viewport.
38.position: absolute; and nested effect
39.position:relative; top:20px; left:20px;