alignment-001-print-ref.html (1801B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <style> 4 .container { 5 display: grid; 6 grid-template-rows: 50px auto auto auto 50px; 7 height: 100%; 8 } 9 .outerRow { 10 display: flex; 11 align-items: center; 12 } 13 .outerRow > div:nth-child(1) { text-align: right; } 14 .outerRow > div:nth-child(2) { text-align: left; } 15 .outerRow > div:nth-child(3) { text-align: center; } 16 .outerRow > div:nth-child(4) { text-align: right; } 17 .outerRow > div:nth-child(5) { text-align: left; } 18 .outerRow > div:first-child, 19 .outerRow > div:last-child { width: 50px; } 20 .outerRow > div:nth-child(3) { margin:auto; } 21 22 .innerRow { 23 display: flex; 24 flex: 1; 25 } 26 .innerRow > div { 27 width: 50px; 28 text-align: center; 29 } 30 .innerRow > div:first-child { 31 margin-right: auto; 32 } 33 @page { 34 size: 550px 400px; 35 margin: 0; 36 } 37 body { 38 margin: 0; 39 } 40 </style> 41 <div style="margin:58px;"> 42 Small blue letters from A to P should be seen in a clockwise manner, starting 43 with A in the top left corner. 44 </div> 45 46 <div style="position:absolute; inset:0; font-family:monospace; font-size:0.7em; color:blue;"> 47 <div class="container"> 48 <div class="outerRow"> 49 <div>A</div> 50 <div>B</div> 51 <div>C</div> 52 <div>D</div> 53 <div>E</div> 54 </div> 55 <div class="innerRow" style="align-items:flex-start;"> 56 <div>P</div> 57 <div>F</div> 58 </div> 59 <div class="innerRow" style="align-items:center;"> 60 <div>O</div> 61 <div>G</div> 62 </div> 63 <div class="innerRow" style="align-items:flex-end;"> 64 <div>N</div> 65 <div>H</div> 66 </div> 67 <div class="outerRow"> 68 <div>M</div> 69 <div>L</div> 70 <div>K</div> 71 <div>J</div> 72 <div>I</div> 73 </div> 74 </div> 75 </div>