I have a simple one page website which is meant to be entered across the page.
This is the basic structure of the page:
<html><head>
<style>
body {
position: absolute;
top: 25%;
-moz-transform: translateY(-25%);
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
background-color: #4e5a65;
font-family:san fransisco, helvetica neue thin, helvetica neue, helvetica, arial;
font-size: 24px;
color: #E4F1FE;
}
a {
color: #abd4fc;
font-family:san fransisco, helvetica neue thin, helvetica neue, helvetica, arial;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
color: white;
}
a:visited {
color: #fdd1e7;
}
li {
margin: 10px 0;
}
h5 {
margin-top: 1px;
margin-bottom: 0px;
}
h1 {
margin-bottom: 0px;
}
</style>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title></title>
</head>
<body>
<h1 style="text-align: center;">Title Text</h1>
</body></html>
I'd like the content to be centered horizontally, and to begin at the top of the page with some margin. When I navigate to the website this is the case. However Safari's screenshot utility produces this:
Am I not using the industry-standard method to center my content? How can I fix this issue?
question from:https://stackoverflow.com/questions/65651987/how-to-properly-center-website-for-safari-screenshot
