OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 | 2 |
3 <style> | 3 <style> |
4 .container { | 4 .container { |
5 background: grey; | 5 background: grey; |
6 width: 200px; | 6 width: 200px; |
7 height: 100px; | 7 height: 100px; |
8 } | 8 } |
9 .grid { display: grid; } | 9 .grid { display: grid; } |
10 .flex { display: flex; } | 10 .flex { display: flex; } |
11 .itemsCenter { | 11 .itemsCenter { |
12 align-items: center; | 12 align-items: center; |
13 justify-items: center; | 13 justify-items: center; |
14 } | 14 } |
15 </style> | 15 </style> |
16 | 16 |
17 <p>Grid item created as anonymous box to contain the text element. The text elem
ent should be centered in both axis due to the Default Alignment 'center' value
on its container.</p> | 17 <p>Grid item created as anonymous box to contain the text element. The text elem
ent should be centered in both axis due to the Default Alignment 'center' value
on its container.</p> |
18 <div class="container grid itemsCenter"> | 18 <div class="container grid itemsCenter"> |
19 foobar | 19 foobar |
20 </div> | 20 </div> |
21 | 21 |
22 <p>Flex item created as anonymous box to contain the text element. The text elem
ent should be centered in both axis due to the Default Alignment 'center' value
on its container.</p> | 22 <p>Flex item created as anonymous box to contain the text element. The text elem
ent should be centered in cross axis due to the Default Alignment 'center' value
on its container.</p> |
23 <div class="container flex itemsCenter"> | 23 <div class="container flex itemsCenter"> |
24 foobar | 24 foobar |
25 </div> | 25 </div> |
OLD | NEW |