display-contents-alignment-002-ref.html (539B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Test Reference</title> 4 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> 5 <style> 6 .container { 7 display: grid; 8 width: 300px; 9 height: 300px; 10 justify-items: center; 11 border: 2px solid purple; 12 } 13 .container > div { 14 width: 100px; 15 height: 100px; 16 background: blue; 17 justify-self: auto; 18 } 19 </style> 20 <p>Test passes if there's a blue square horizontally centered inside the box.</p> 21 <div class="container"> 22 <div></div> 23 </div>