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; }
 
Search WWH ::




Custom Search