<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>