div-align-ref.html (1537B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <style> 6 .test { width: 50px; background-color: yellow; } 7 .center { text-align: center; } 8 .center .test { margin: 0 auto; } 9 .left { text-align: left; } 10 .left .test { margin-right: auto; } 11 .right { text-align: right; } 12 .right .test { margin-left: auto; } 13 .rtl { direction: rtl; } 14 .ltr { direction: ltr; } 15 .left .margin { margin-left: 1em; } 16 .right .margin { margin-right: 1em; } 17 </style> 18 </head> 19 <body> 20 <!-- Centered tests --> 21 <div class=center> 22 <div class=test>t א</div> 23 <div class="test rtl">t א</div> 24 <div class="test margin">t א</div> 25 </div> 26 27 <div class=center> 28 <div class="test left">t א</div> 29 <div class="test right">t א</div> 30 </div> 31 32 <div class=left> 33 <div class=center> 34 <div class=test>t א</div> 35 </div> 36 </div> 37 38 <!-- Left-aligned tests --> 39 <div class=left> 40 <div class=test>t א</div> 41 <div class="test rtl">t א</div> 42 <div class="test margin">t א</div> 43 </div> 44 45 <div class="left rtl"> 46 <div class=test>t א</div> 47 <div class="test ltr">t א</div> 48 <div class="test margin">t א</div> 49 </div> 50 51 <div class=left> 52 <div class="test center">t א</div> 53 <div class="test right">t א</div> 54 </div> 55 56 <!-- Right-aligned tests --> 57 <div class=right> 58 <div class=test>t א</div> 59 <div class="test rtl">t א</div> 60 <div class="test margin">t א</div> 61 </div> 62 63 <div class="right rtl"> 64 <div class=test>t א</div> 65 <div class="test ltr">t א</div> 66 <div class="test margin">t א</div> 67 </div> 68 69 <div class=right> 70 <div class="test left">t א</div> 71 <div class="test center">t א</div> 72 </div> 73 74 </body> 75 </html>