Thread CSS: vertical-align:middle (17 answers)
Opened by esskar at 2005-03-07 22:52

GwenDragon
 2005-03-08 12:29
#24342 #24342
User since
2005-01-17
14761 Artikel
Admin1
[Homepage]
user image
Wenn der geneigte Leser sich mal die Definition des CSS2 bitte zu Gemüte führen möchte und auch notfalls in der Definition bei http://www.w3.org/Style/CSS/ nachschauen:
Quote
'vertical-align'
Value:   baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial:   baseline
Applies to:   inline-level and 'table-cell' elements
Inherited:   no
Percentages:   refer to the 'line-height' of the element itself
Media:   visual
Computed value:   for <percentage> and <length> the absolute length, otherwise as specified

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

Note. Values of this property have slightly different meanings in the context of tables. Please consult the section on table height algorithms for details.

The following values only have meaning with respect to a parent inline-level element, or to the strut of a parent block-level, table-cell, table-caption or inline-block element.
baseline
Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom margin edge with the parent's baseline.
middle
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
sub
Lower 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
Raise 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
Align the bottom of the box with the bottom of the parent element's font.
<percentage>
Raise (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>
Raise (positive value) or lower (negative value) the box by this distance. The value '0cm' means the same as 'baseline'.

The following values align the element relative to the line box. Since the element may have children aligned relative to it (which in turn may have descendants aligned relative to them), these values use the bounds of the aligned subtree. The aligned subtree of an inline element contains that element and the aligned subtrees of all children inline elements whose computed 'vertical-align' value is not 'top' or 'bottom'. The top of the aligned subtree is the highest of the tops of the boxes in the subtree, and the bottom is analogous.
top
Align the top of the aligned subtree with the top of the line box.
bottom
Align the bottom of the aligned subtree with the bottom of the line box.

The baseline of an 'inline-table' is the baseline of the first row of the table.

A UA should use the baseline of the last line box in the normal flow in the element as the baseline of an 'inline-block', or the element's bottom margin edge, if there is none.


Und etwas ändern:
Code: (dl )
1
2
#pagemenu {
    display: inline-table;

:cool: :)\n\n

<!--EDIT|GwenDragon|1110277943-->

View full thread CSS: vertical-align:middle