Image alignProperty
Image Object
Definition and Usage
The align property can set or return the value of the image's align attribute.
The align property specifies the alignment with respect to inline content.
Syntax
imageObject.align=value
The align attribute can have the following values:
| Value | Description |
|---|---|
| left | Left-aligns the image |
| right | Right-aligns the image |
| middle | Center-aligns the image |
| top | Top-aligns the image |
| bottom | Bottom-aligns the image |
Browser Support
All major browsers support the align attribute
Example
Example
The following example right-aligns the image according to the surrounding text:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.com)</title>
<script>
function alignImg(){
document.getElementById("compman").align="right";
}
</script>
</head>
<body>
<img id="compman" src="compman.gif.html" alt="Computerman" width="107" height="98">
<p>Some text. Some text. Some text. Some text. Some text.</p>
<input type="button" onclick="alignImg()" value="Align Image">
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.com)</title>
<script>
function alignImg(){
document.getElementById("compman").align="right";
}
</script>
</head>
<body>
<img id="compman" src="compman.gif.html" alt="Computerman" width="107" height="98">
<p>Some text. Some text. Some text. Some text. Some text.</p>
<input type="button" onclick="alignImg()" value="Align Image">
</body>
</html>
Try it yourself »
Image Object Other Extensions