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