HTML and CSS Reference
In-Depth Information
Elements can also be raised (positive value) or lowered (negative value) with either
a length or percentage value. Both percentage and length values start at the baseline; the
percentage value is relative to the line height.
/* Align text segment 5 pixels below normal text */
Normal <span style="vertical-align: -5px;">Lowered</span>
When applied to table cell elements
<th>
and
<td>
, the
vertical-align
property
behaves as the deprecated
valign
attribute in HTML. Valid values for table cells are
baseline
,
bottom
,
middle
, and
top
. Other values, including lengths and percentages,
should not be used with table cells.
The
top
value aligns the cell's top padding edge with the top of the row. Likewise,
bottom
aligns the cell's bottom padding edge with the bottom of the row. More notably,
the
baseline
value aligns the cell's content so that it shares the same baseline as other
cells that are baseline-aligned.
In contrast with inline elements that default to
baseline
, table cell elements are
normally aligned in the middle. For table cells, the
middle
value behaves in a more
intuitive way by aligning the cell's padding box in the middle of the row, making the cell's
content appear centered.
In the following example, the table cell element is vertically aligned at the bottom:
<table>
<tr>
<td style="vertical-align: bottom;">Bottom</td>
</tr>
</table>
Centering
There are several ways to center elements in CSS. A common method is to use the
text-align
property with the value
center
.
.text-center { text-align: center; }
By applying this property to the containing element, text within it is center-aligned.
<p class="text-center">Centered text</p>
This method works for text and inline elements, but not for block elements. To center
block elements, the left and right margins can be set to
auto
, which makes the horizontal
margins equally large, causing the block to be centered.
.box-center { margin: 0 auto; }