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 .selfCenter { |
12 align-items: center; | 12 align-self: center; |
13 justify-items: center; | 13 justify-self: 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"> |
19 <div>foobar</div> | 19 <div class="selfCenter">foobar</div> |
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"> |
24 <div>foobar</div> | 24 <div class="selfCenter">foobar</div> |
cbiesinger
2017/05/24 16:54:15
I think it would be easier to understand if you on
jfernandez
2017/05/24 22:46:58
The issue is present in both layout models. Do you
| |
25 </div> | 25 </div> |
OLD | NEW |