Next »
58/920
« Previous

Position image in relation to containing element in HTML and CSS

Description

The following code shows how to position image in relation to containing element.

Example


<html>
<head>
<!-- ww  w .  ja v a 2 s .  co m-->

<style type='text/css'>

p {font:12pt arial;
height:300px;
}


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;}
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://www.java2s.com/style/download.png" alt="plane" width="74" height="74" />The image is vertically aligned using the value baseline</p>
<p><img class="middle" src="http://www.java2s.com/style/download.png" alt="plane" width="74" height="74" />The image is vertically aligned using the value middle </p>
<p><img class="sub" src="http://www.java2s.com/style/download.png" alt="plane" width="74" height="74" />The image is vertically aligned using the value sub </p>
<p><img class="super" src="http://www.java2s.com/style/download.png" alt="plane" width="74" height="74" />The image is vertically aligned using the value super </p>
<p><img class="text-top" src="http://www.java2s.com/style/download.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://www.java2s.com/style/download.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://www.java2s.com/style/download.png" alt="plane" width="74" height="74" />The image is vertically aligned using the value text-bottom </p>
<p><img class="bottom" src="http://www.java2s.com/style/download.png" alt="plane" width="74" height="74" />The image is vertically aligned using the value text-bottom </p>

</body>
</html>

Click to view the demo

The code above generates the following result.

Position image in relation to containing element in HTML and CSS
Next »
« Previous