You are here: Reference > JavaScript > client-side > HTML DOM > properties > align (embed, img, object, ...)

align property (embed, img, object, ...)

Browser support:
Sets or retrieves the object's position with respect to the surrounding text.
This property is deprecated. Use the verticalAlign style property instead.

Syntax:

object.align;
You can find the related objects in the Supported by objects section below.
This property is read/write.
HTML page for this property: align

Possible values:

String that sets or retrieves the type of alignment.
One of the following values:
absbottom
Aligns the bottom of the object with the absolute bottom of the surrounding text.
absmiddle
Aligns the middle of the object with the middle of the surrounding text.
baseline
Aligns the bottom of the object with the baseline of the surrounding text.
bottom
Aligns the bottom of the object with the bottom of the surrounding text.
left
Default. Aligns the object to the left of the surrounding text.
middle
Aligns the middle of the object with the surrounding text.
right
Aligns the object to the right of the surrounding text.
texttop
Aligns the top of the object with the absolute top of the surrounding text.
top
Aligns the top of the object with the top of the surrounding text.
Default: left.

Example HTML code 1:

This example illustrates the use of the align attribute:
The bottom of the image is aligned
<img src="picture.gif" align="bottom"/>
to the bottom of the surrounding text content.
<br /><br /><br />
The top of the image is aligned
<img src="picture.gif" align="top"/>
to the top of the surrounding text content.
Did you find this example helpful? yes no

Example HTML code 2:

Recommendation:
The bottom of the image is aligned
<img src="picture.gif" style="vertical-align:text-bottom;"/>
to the bottom of the surrounding text content.
<br /><br /><br />
The top of the image is aligned
<img src="picture.gif" style="vertical-align:top;"/>
to the top of the surrounding text content.
Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the align property:
<head>
    <script type="text/javascript">
        function ChangeAlign (elem) {
            var image = document.getElementById ("myImage");

            // Returns the index of the selected option
            var whichSelected = elem.selectedIndex;

            // Returns the text of the selected option
            var alignType = elem.options[whichSelected].text;

            image.align = alignType;
        }
    </script>
</head>
<body>
    This image is aligned relative
    <img id="myImage" src="picture.gif" align="absbottom"/>
    to the surrounding text content.

    <br /><br /><br />
    <select id="mySelect" onchange="ChangeAlign (this);" size="9">
        <option selected="selected">absbottom
        <option />absmiddle
        <option />baseline
        <option />bottom
        <option />left
        <option />middle
        <option />right
        <option />texttop
        <option />top
    </select>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content