1xptolevitico69

Display grid

Dec 4th, 2021 (edited)
800
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Display grid</title>
  9.   <style>
  10.     .parent {
  11.       display: grid;
  12.       place-items: center;
  13.       border: 5px solid red;
  14.       width: 600px;
  15.       height: 100px;
  16.       float: right;
  17.     }
  18.  
  19.     .child {
  20.       text-align: center;
  21.       width: 400px;
  22.       background-color: red;
  23.       color: white;
  24.       font-family: verdana;
  25.       padding: 5px 0;
  26.     }
  27.  
  28.      a {
  29.       position: absolute;
  30.       text-decoration: none;
  31.       font-size: 20px;
  32.       font-family: verdana;
  33.       color: white;
  34.       background-color: red;
  35.       padding: 5px 20px;
  36.       line-height: 50px;
  37.     }
  38.  
  39.   </style>
  40. </head>
  41.  
  42. <body>
  43.  
  44.     <a href='https://www.youtube.com/channel/UCI875fP1d6RdkZje7R-9ieQ'>YouTube Channel</a>
  45.  
  46.   <div class='parent'>
  47.     <p class='child'>I am inside a DIV with "float right". But I'm centered with "display grid".</p>
  48.   </div>
  49.  
  50. </body>
  51. </htm>
RAW Paste Data