424 lines
19 KiB
HTML
424 lines
19 KiB
HTML
<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> |