Categories:
.NET (357)
C (330)
C++ (183)
CSS (84)
DBA (2)
General (7)
HTML (4)
Java (574)
JavaScript (106)
JSP (66)
Oracle (114)
Perl (46)
Perl (1)
PHP (1)
PL/SQL (1)
RSS (51)
Software QA (13)
SQL Server (1)
Windows (1)
XHTML (173)
Other Resources:
How In-line Elements Are Formatted Side by Side
How In-line Elements Are Formatted Side by Side? - CSS Tutorials - Understanding Multiple Element Formatting Rules
✍: FYIcenter.com
If in-line elements are coded next to each other, they will be formatted side by side in a line box. Their individual widths and heights will be respected. Their relative vertical positions will be controlled by the vertical-align style property, which takes 8 different values: baseline, sub, super, top, text-top, middle, bottom, text-bottom.
The tutorial exercise below shows you some good examples on align in-line elements in different ways:
<html><head> <style type="text/css"> H1 {font-size: 20px} DIV.page {width: 450px; border: 1px solid black} TABLE#out {background-color: #ffdddd} TD#box {border: 1px solid black} P#box {width: 300px; height: 150px; font-size: 14px; background-color: #ffffff} SPAN.top {font-size: 12px; line-height: 30px; background-color: #ffdddd} SPAN.middle {font-size: 40px; line-height: 50px; background-color: #ddffdd} SPAN.bottom {font-size: 12px; line-height: 20px; background-color: #ddddff} #top {vertical-align: top} #middle {vertical-align: middle} #bottom {vertical-align: bottom} #textTop {vertical-align: text-top} #textBottom {vertical-align: text-bottom} #super {vertical-align: super} #sub {vertical-align: sub} TD.legend#g50 {height: 50px; background-color: #dddddd} TD.legend#w50 {height: 50px; background-color: #ffffff} </style> </head><body><div class="page"> <H1>In-line Element Alignments</H1> <table id=out><tr> <td id=box><p id=box> <span class=top id=top>Thank</span> <span class=middle id=middle>you</span> <span class=bottom id=bottom>for</span> <span class=middle id=middle>visiting</span> <span class=top id=top>FYIcenter.</span> <br/> <span class=top id=textTop>Thank</span> <span class=middle id=middle>you</span> <span class=bottom id=textBottom>for</span> <span class=middle id=middle>visiting</span> <span class=top id=textTop>FYIcenter.</span> <br/> <span class=top id=supper>Thank</span> <span class=middle id=middle>you</span> <span class=bottom id=sub>for</span> <span class=middle id=middle>visiting</span> <span class=top id=supper>FYIcenter.</span> </p></td> <td valign=top><table cellpadding=0 cellspacing=0> <tr><td class=legend id=g50>- top/bottom</td></tr> <tr><td class=legend id=w50>- text-top/bottom</td></tr> <tr><td class=legend id=g50>- supper/sub</td></tr> </table></td> </tr></table> <p align="right">By FYIcenter.com</p> <div></body></html>
Save this document as verticalAlign.html, and view it with a browser,
you will see how different vertical-align values behave as shown below:
2007-05-11, 4792👍, 0💬
Popular Posts:
What are the five levels in CMMI? There are five levels of the CMM. According to the SEI, Level 1 – ...
How To Enter Numeric Values as HEX Numbers? - MySQL FAQs - Introduction to SQL Basics If you want to...
Is There Any XSD File to Validate Atom Feed Files? - RSS FAQs - Atom Feed Introduction and File Gene...
How To Use mysqlbinlog to View Binary Logs? - MySQL FAQs - Server Daemon mysqld Administration If yo...
If client side validation is enabled in your Web page, does that mean server side code is not run? W...