| <!DOCTYPE html> |
| <html> |
| <!-- Simple vertical alignment test --> |
| <head> |
| <style> |
| body { |
| font-family: Roboto; |
| margin: 0px; |
| } |
| |
| div.block { |
| display: block; |
| } |
| div.inline_block { |
| display: inline-block; |
| } |
| |
| div.greybg_40 { |
| background: #404040; |
| color: #FFFFFF; |
| } |
| div.greybg_80 { |
| background: #808080; |
| } |
| div.greybg_C0 { |
| background: #C0C0C0; |
| } |
| |
| div.halfheightbox { |
| width : 32px; |
| height : 64px; |
| } |
| div.fullheightbox { |
| width : 32px; |
| height : 128px; |
| } |
| |
| div.baseline { |
| vertical-align: baseline; |
| } |
| div.middle { |
| vertical-align: middle; |
| } |
| div.top { |
| vertical-align: top; |
| } |
| div.bottom { |
| vertical-align: bottom; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="block greybg_C0 "> |
| <div class="greybg_40 fullheightbox inline_block middle">A |
| </div> |
| <div class="inline_block middle"> |
| Middle |
| </div> |
| </div> |
| <div class="block greybg_C0 "> |
| <div class="greybg_80 halfheightbox inline_block top">B |
| </div> |
| <div class="inline_block top"> |
| Top |
| </div> |
| </div> |
| <div class="block greybg_C0 "> |
| <div class="greybg_40 halfheightbox inline_block bottom">C |
| </div> |
| <div class="inline_block bottom"> |
| Bottom |
| </div> |
| </div> |
| <div class="block greybg_C0 "> |
| <div class="greybg_80 halfheightbox inline_block baseline">D |
| </div> |
| <div class="inline_block baseline"> |
| Baseline |
| </div> |
| </div> |
| </body> |
| </html> |
