OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 | |
3 <style> | |
4 .container { | |
5 background: grey; | |
6 width: 200px; | |
7 height: 100px; | |
8 } | |
9 .grid { display: grid; } | |
10 .flex { display: flex; } | |
11 .itemsCenter { | |
12 align-items: center; | |
13 justify-items: center; | |
14 } | |
15 </style> | |
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> | |
18 <div class="container grid itemsCenter"> | |
19 foobar | |
20 </div> | |
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> | |
23 <div class="container flex itemsCenter"> | |
24 foobar | |
25 </div> | |
OLD | NEW |