This site is designed for accessibility. Content is obtainable and functional to any browser or Internet device. This site's full visual experience is available in a graphical browser that supports web standards. Please consider upgrading your web browser.

Alignment

Vertical Alignment

The vertical alignment property affects the vertical positioning inside a line box of the boxes generated by an inline-level element. It applies only to inline elements, although that includes replaced elements such as images and form inputs. It is not inherited. Element content is typically vertically centered on a rendered line (with extra line-height amounts distributed equally on the top and bottom.) This property allows inline content boxes to be vertically aligned with respect to several different criteria on a rendered line.

Values include:

• baseline - aligns the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom of the box with the parent's baseline. It is the initial value of vertical-align. Baseline means that text of any size will have its baseline aligned with the overall basline for the line. Images will have their bottom edge rest on the baseline, since that's what the value baseline is defined to mean for images (or any other replaced element).
• middle - aligns the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
• sub - lowers the baseline of the box to the proper position for subscripts of the parent's box. (This value has no effect on the font size of the element's text.)
• super - raises the baseline of the box to the proper position for superscripts of the parent's box. (This value has no effect on the font size of the element's text.)
• Text-top- align the top of the box with the top of the parent element's font.
• Text-bottom - aligns the bottom of the box with the bottom of the parent element's font.
• <Percentage> - raises (positive value) or lower (negative value) the box by this distance (a percentage of the 'line-height' value). The value '0%' means the same as 'baseline'.
• <Length> - raises (positive value) or lower (negative value) the box by this distance. The value '0cm' means the same as 'baseline'.

The remaining values refer to the line box in which the generated box appears:

• top - aligns the top of the box with the top of the line box.
• Bottom - aligns the bottom of the box with the bottom of the line box.

In CSS1 vertical-align only took percentage and some named values but CSS2:10.8.1 expands the range of premitted values a bit. See the definition of line-height for details.

Horizontal Alignment

Compared to vertical alignment, horizontal alignment with the property text-align is simple. There are only four values:

• left
• right
• center
• justify

The default value is dependent on the language being used in the document, but will usually be either left or right.

---

© 1998-2024 Laura L. Carlson
Email: lcarlson@d.umn.edu
Department: Information Technology Systems and Services, University of Minnesota Duluth
Document Last Modified: 2002
Page URL: http:// www.d.umn.edu /~lcarlson/csswork/inline/alignment.html

The views and opinions expressed in this page are strictly those of the page author. The contents of this page have not been reviewed or approved by the University of Minnesota.