Last active
December 13, 2017 17:48
-
-
Save zelenko/a1a9995dd7e7da4a968b3a6628e9543c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Center of Page</title> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <style type="text/css"> | |
| body { | |
| background-color: #f0f0f2; | |
| margin: 0; | |
| padding: 0; | |
| font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| } | |
| div { | |
| width: 600px; | |
| margin: 5em auto; | |
| padding: 50px; | |
| background-color: #fff; | |
| border-radius: 1em; | |
| } | |
| a:link, a:visited { | |
| color: #38488f; | |
| text-decoration: none; | |
| } | |
| @media (max-width: 700px) { | |
| body { | |
| background-color: #fff; | |
| } | |
| div { | |
| width: auto; | |
| margin: 0 auto; | |
| border-radius: 0; | |
| padding: 1em; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| <h1>The center of Page</h1> | |
| <p>This is how to present info in the center of the page. </p> | |
| <p><a href="https://github.com/zelenko/">More information...</a></p> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Center V2</title> | |
| <link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css"> | |
| <style> | |
| html, body { | |
| height: 100%; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| display: table; | |
| font-weight: 100; | |
| font-family: 'Lato'; | |
| } | |
| .container { | |
| text-align: center; | |
| display: table-cell; | |
| vertical-align: middle; | |
| } | |
| .content { | |
| text-align: center; | |
| display: inline-block; | |
| } | |
| .title { | |
| font-size: 60px; | |
| } | |
| .subtitle { | |
| font-size: 30px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="content"> | |
| <div class="title">center-version-2.html</div> | |
| <div class="subtitle">Display text @ center of page</div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment