HTML CSS examples for CSS Widget:Grid
vertically align objects in CSS when working with CSS grids
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .wrapper {<!--from w w w .j a va 2s. c om--> display:grid; grid-template-columns:100px 100px 301px; grid-template-rows:201px 201px; grid-gap:11px; background-color:Chartreuse; color:yellow; align-content:space-evenly; } .workaround { border:2px solid blue; margin:0; padding:0; height:100%; width:100%; display:table; } h1 { font-size:2em; border:2px solid pink; display:table-cell; vertical-align:middle; } #boxc { background:red; } .box { background-color:OrangeRed; color:grey; border-radius:6px; padding:21px; font-size:100%; } </style> </head> <body> <div class="wrapper"> <div class="box a"> Lor </div> <div class="box b"> Lor </div> <div class="box c" id="boxc"> <div class="workaround"> <h1>Lorem ipsum dolor sit amet</h1> </div> </div> <div class="box d"> Lor </div> <div class="box e"> Lor </div> <div class="box f"> Lor </div> </div> </body> </html>