In order to access this site you need to enable JavaScript!

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.

Copy Code

Preview

Syntax Highlighter

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.

Copy Code

Preview

Syntax Highlighter

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>