CSS 2 Example 44

>> English << | česky | Português ZVON > Tutorials > CSS2 tutorial
Intro / Search / ZVON
>> Example 44 << | Prev | Next | Index | Contents

Data in table cells can be vertically aligned.

XML SourceCSS stylesheetExample link
(1)
<AAA>
<BBB>
<CCC>ccc1 ccc1 ccc1 ccc1 </CCC>
<DDD>ddd</DDD>
<EEE>eee</EEE>
</BBB>
<BBB>
<CCC>ccc2 ccc2 ccc2 ccc2 </CCC>
<FFF>fff</FFF>
<GGG>ggg</GGG>
</BBB>
</AAA>

* {padding:1ex; border:solid}
AAA {display: table; width:150px; border:none }
BBB {display: table-row; border:none}
CCC {display: table-cell}
DDD {display: table-cell; vertical-align:top}
EEE {display: table-cell; vertical-align:bottom}
FFF {display: table-cell; vertical-align:baseline}
GGG {display: table-cell; vertical-align:middle}
View output

AltStyle によって変換されたページ (->オリジナル) /