| <head> |
| <style> |
| div, center, table { |
| border: 2px solid blue; |
| } |
| |
| div, center { |
| padding: 2px; |
| } |
| |
| .fixedMargin { |
| margin-left: 2px; |
| margin-right: 2px; |
| } |
| |
| .autoWidth { |
| border: 4px solid green; |
| } |
| |
| .fixedWidth { |
| border: 4px solid purple; |
| } |
| |
| .fixedWidth > * { |
| width: 400px; |
| } |
| |
| .full { |
| width: 100%; |
| } |
| |
| .rtl { |
| border: none; |
| direction: rtl; |
| margin-top: 1em; |
| } |
| |
| </style> |
| </head> |
| |
| This is a test of all the various HTML alignments using LTR direction. |
| |
| <div class="autoWidth"> |
| <div>Normal div inside normal div</div> |
| <div align=left>Left div inside normal div</div> |
| <div align=center>Center div inside normal div</div> |
| <div align=right>Right div inside normal div</div> |
| <center>Center tag inside normal div</center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </div> |
| |
| <div class="fixedWidth"> |
| <div>Normal fixed width div inside normal div</div> |
| <div align=left>Left fixed width div inside normal div</div> |
| <div align=center>Center fixed width div inside normal div</div> |
| <div align=right>Right fixed width div inside normal div</div> |
| <center>Center tag (fixed width) inside normal div</center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </div> |
| |
| <div align=left class="autoWidth"> |
| <div>Normal div inside align=left div</div> |
| <div align=left>Left div inside align=left div</div> |
| <div align=center>Center div inside align=left div</div> |
| <div align=right>Right div inside align=left div</div> |
| <center>Center tag inside align=left div</center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </div> |
| |
| <div align=left class="fixedWidth"> |
| <div>Normal fixed width div inside align=left div</div> |
| <div align=left>Left fixed width div inside align=left div</div> |
| <div align=center>Center fixed width div inside align=left div</div> |
| <div align=right>Right fixed width div inside align=left div</div> |
| <center>Center tag (fixed width) inside align=left div</center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </div> |
| |
| <div align=center class="autoWidth"> |
| <div>Normal div inside align= center div</div> |
| <div align=left>Left div inside align=center div</div> |
| <div align=center>Center div inside align=center div</div> |
| <div align=right>Right div inside align=center div</div> |
| <center>Center tag inside align=center div</center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </div> |
| |
| <div align=center class="fixedWidth"> |
| <div>Normal fixed width div inside align=center div</div> |
| <div style="margin-left: auto">Normal fixed width div (auto left margin) inside align=center div</div> |
| <div style="margin-right: auto">Normal fixed width div (auto right margin) inside align=center div</div> |
| <div align=left>Left fixed width div inside align=center div</div> |
| <div align=center>Center fixed width div inside align=center div</div> |
| <div align=right>Right fixed width div inside align=center div</div> |
| <center>Center tag (fixed width) inside align=center div</center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </div> |
| |
| <div align=right class="autoWidth"> |
| <div>Normal div inside align=right div</div> |
| <div align=left>Left div inside align=right div</div> |
| <div align=center>Center div inside align=right div</div> |
| <div align=right>Right div inside align=right div</div> |
| <center>Center tag inside align=right div</center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </div> |
| |
| <div align=right class="fixedWidth"> |
| <div>Normal fixed width div inside align=right div</div> |
| <div align=left>Left fixed width div inside align=right div</div> |
| <div align=center>Center fixed width div inside align=right div</div> |
| <div align=right>Right fixed width div inside align=right div</div> |
| <center>Center tag (fixed width) inside align=right div</center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </div> |
| |
| <p> |
| This is a test using TABLE cells (all in the LTR direction). |
| </p> |
| |
| |
| |
| |
| |
| |
| |
| <table class="full"><tr><td class="autoWidth"> |
| <div>Normal div inside normal td</div> |
| <div align=left>Left div inside normal td </div> |
| <div align=center>Center div inside normal td </div> |
| <div align=right>Right div inside normal td </div> |
| <center>Center tag inside normal td </center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </td></tr></table> |
| |
| <table class="full"><tr><td class="fixedWidth"> |
| <div>Normal fixed width div inside normal td </div> |
| <div align=left>Left fixed width div inside normal td </div> |
| <div align=center>Center fixed width div inside normal td </div> |
| <div align=right>Right fixed width div inside normal td </div> |
| <center>Center tag (fixed width) inside normal td </center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </table> |
| |
| <table class="full"><tr><td align=left class="autoWidth"> |
| <div>Normal div inside align=left td </div> |
| <div align=left>Left div inside align=left td </div> |
| <div align=center>Center div inside align=left td </div> |
| <div align=right>Right div inside align=left td </div> |
| <center>Center tag inside align=left td </center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </table> |
| |
| <table class="full"><tr><td align=left class="fixedWidth"> |
| <div>Normal fixed width div inside align=left td </div> |
| <div align=left>Left fixed width div inside align=left td </div> |
| <div align=center>Center fixed width div inside align=left td </div> |
| <div align=right>Right fixed width div inside align=left td </div> |
| <center>Center tag (fixed width) inside align=left td </center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </table> |
| |
| <table class="full"><tr><td align=center class="autoWidth"> |
| <div>Normal div inside align= center td </div> |
| <div align=left>Left div inside align=center td </div> |
| <div align=center>Center div inside align=center td </div> |
| <div align=right>Right div inside align=center td </div> |
| <center>Center tag inside align=center td </center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </table> |
| |
| <table class="full"><tr><td align=center class="fixedWidth"> |
| <div>Normal fixed width div inside align=center td </div> |
| <div align=left>Left fixed width div inside align=center td </div> |
| <div align=center>Center fixed width div inside align=center td </div> |
| <div align=right>Right fixed width div inside align=center td </div> |
| <center>Center tag (fixed width) inside align=center td </center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </table> |
| |
| <table class="full"><tr><td align=right class="autoWidth"> |
| <div>Normal div inside align=right td </div> |
| <div align=left>Left div inside align=right td </div> |
| <div align=center>Center div inside align=right td </div> |
| <div align=right>Right div inside align=right td </div> |
| <center>Center tag inside align=right td </center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </table> |
| |
| <table class="full"><tr><td align=right class="fixedWidth"> |
| <div>Normal fixed width div inside align=right td </div> |
| <div align=left>Left fixed width div inside align=right td </div> |
| <div align=center>Center fixed width div inside align=right td </div> |
| <div align=right>Right fixed width div inside align=right td </div> |
| <center>Center tag (fixed width) inside align=right td </center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </table> |
| |
| |
| |
| |
| |
| <div class="rtl"> |
| |
| This is a test of all the various HTML alignments using RTL direction. |
| |
| <div class="autoWidth"> |
| <div>Normal div inside normal div</div> |
| <div align=left>Left div inside normal div</div> |
| <div align=center>Center div inside normal div</div> |
| <div align=right>Right div inside normal div</div> |
| <center>Center tag inside normal div</center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </div> |
| |
| <div class="fixedWidth"> |
| <div>Normal fixed width div inside normal div</div> |
| <div align=left>Left fixed width div inside normal div</div> |
| <div align=center>Center fixed width div inside normal div</div> |
| <div align=right>Right fixed width div inside normal div</div> |
| <center>Center tag (fixed width) inside normal div</center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </div> |
| |
| <div align=left class="autoWidth"> |
| <div>Normal div inside align=left div</div> |
| <div align=left>Left div inside align=left div</div> |
| <div align=center>Center div inside align=left div</div> |
| <div align=right>Right div inside align=left div</div> |
| <center>Center tag inside align=left div</center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </div> |
| |
| <div align=left class="fixedWidth"> |
| <div>Normal fixed width div inside align=left div</div> |
| <div align=left>Left fixed width div inside align=left div</div> |
| <div align=center>Center fixed width div inside align=left div</div> |
| <div align=right>Right fixed width div inside align=left div</div> |
| <center>Center tag (fixed width) inside align=left div</center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </div> |
| |
| <div align=center class="autoWidth"> |
| <div>Normal div inside align= center div</div> |
| <div align=left>Left div inside align=center div</div> |
| <div align=center>Center div inside align=center div</div> |
| <div align=right>Right div inside align=center div</div> |
| <center>Center tag inside align=center div</center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </div> |
| |
| <div align=center class="fixedWidth"> |
| <div>Normal fixed width div inside align=center div</div> |
| <div align=left>Left fixed width div inside align=center div</div> |
| <div align=center>Center fixed width div inside align=center div</div> |
| <div align=right>Right fixed width div inside align=center div</div> |
| <center>Center tag (fixed width) inside align=center div</center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </div> |
| |
| <div align=right class="autoWidth"> |
| <div>Normal div inside align=right div</div> |
| <div align=left>Left div inside align=right div</div> |
| <div align=center>Center div inside align=right div</div> |
| <div align=right>Right div inside align=right div</div> |
| <center>Center tag inside align=right div</center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </div> |
| |
| <div align=right class="fixedWidth"> |
| <div>Normal fixed width div inside align=right div</div> |
| <div align=left>Left fixed width div inside align=right div</div> |
| <div align=center>Center fixed width div inside align=right div</div> |
| <div align=right>Right fixed width div inside align=right div</div> |
| <center>Center tag (fixed width) inside align=right div</center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </div> |
| |
| <p> |
| This is a test using TABLE cells (all in the RTL direction). |
| </p> |
| |
| |
| |
| |
| |
| |
| |
| <table class="full"><tr><td class="autoWidth"> |
| <div>Normal div inside normal td</div> |
| <div align=left>Left div inside normal td </div> |
| <div align=center>Center div inside normal td </div> |
| <div align=right>Right div inside normal td </div> |
| <center>Center tag inside normal td </center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </td></tr></table> |
| |
| <table class="full"><tr><td class="fixedWidth"> |
| <div>Normal fixed width div inside normal td </div> |
| <div align=left>Left fixed width div inside normal td </div> |
| <div align=center>Center fixed width div inside normal td </div> |
| <div align=right>Right fixed width div inside normal td </div> |
| <center>Center tag (fixed width) inside normal td </center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </table> |
| |
| <table class="full"><tr><td align=left class="autoWidth"> |
| <div>Normal div inside align=left td </div> |
| <div align=left>Left div inside align=left td </div> |
| <div align=center>Center div inside align=left td </div> |
| <div align=right>Right div inside align=left td </div> |
| <center>Center tag inside align=left td </center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </table> |
| |
| <table class="full"><tr><td align=left class="fixedWidth"> |
| <div>Normal fixed width div inside align=left td </div> |
| <div align=left>Left fixed width div inside align=left td </div> |
| <div align=center>Center fixed width div inside align=left td </div> |
| <div align=right>Right fixed width div inside align=left td </div> |
| <center>Center tag (fixed width) inside align=left td </center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </table> |
| |
| <table class="full"><tr><td align=center class="autoWidth"> |
| <div>Normal div inside align= center td </div> |
| <div align=left>Left div inside align=center td </div> |
| <div align=center>Center div inside align=center td </div> |
| <div align=right>Right div inside align=center td </div> |
| <center>Center tag inside align=center td </center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </table> |
| |
| <table class="full"><tr><td align=center class="fixedWidth"> |
| <div>Normal fixed width div inside align=center td </div> |
| <div align=left>Left fixed width div inside align=center td </div> |
| <div align=center>Center fixed width div inside align=center td </div> |
| <div align=right>Right fixed width div inside align=center td </div> |
| <center>Center tag (fixed width) inside align=center td </center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </table> |
| |
| <table class="full"><tr><td align=right class="autoWidth"> |
| <div>Normal div inside align=right td </div> |
| <div align=left>Left div inside align=right td </div> |
| <div align=center>Center div inside align=right td </div> |
| <div align=right>Right div inside align=right td </div> |
| <center>Center tag inside align=right td </center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </table> |
| |
| <table class="full"><tr><td align=right class="fixedWidth"> |
| <div>Normal fixed width div inside align=right td </div> |
| <div align=left>Left fixed width div inside align=right td </div> |
| <div align=center>Center fixed width div inside align=right td </div> |
| <div align=right>Right fixed width div inside align=right td </div> |
| <center>Center tag (fixed width) inside align=right td </center> |
| <table><tr><td>Normal table.</tr></td></table> |
| <table align="center"><tr><td>Center aligned table.</tr></td></table> |
| <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table> |
| </table> |
| </div> |
