При уровне масштабирования, показанном на скриншоте ниже, сайт Wired отображается нормально:
Но когда я уменьшил масштаб, я увидел, что все в центре. Когда я сделал веб-страницу, похожую на веб-сайт на изображении, и уменьшил ее, моя не была похожа на изображение ниже.
Эта веб-страница по-прежнему центрирована, но моя была выровнена по левому краю:
Я хочу знать, как сделать так, чтобы моя веб-страница оставалась в центре при уменьшении масштаба.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
width: 1350px;
background-image: url("Images/background.png");
background-repeat: repeat-x;
background-size: 1366;
}
.flex-container {
display: flex;
background-color: #3B5998;
margin-left: -10px;
margin-top: -20px;
margin-right: -8px;
border-bottom: 1px solid #133783;
}
.flex-container > div {
background-color: #3B5998;
padding: 10px;
font-size: 13px;
}
input {
border: 1px solid #1D2A5B;
padding-bottom: 3px;
padding-top: 3px;
}
a {
text-decoration: none;
color: #9CB4D8;
}
a:hover {
text-decoration: underline;
}
.column {
float: left;
width: 450px;
padding: 10px;
height: 300px;
}
.big-input {
padding-bottom: 12px;
padding-top: 12px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div style="margin-left: 169px; margin-top: 10px;">
<img id="logo" style="margin-top: 16px;" src="Images/Facebook-img1.png" alt="LOGO" />
</div>
<div style="display: flex; margin-left: 30%; font-family: helvetica; color: white;">
<td>
<form action="redirect.html">
<table style="margin-top: 15px;">
<tr>
<td>Email or Phone</td>
<td style="display: flex; margin-left: 10px;">Password</td>
<td></td>
</tr>
<tr>
<td><input type="text" /></td>
<td style="display: flex; margin-left: 10px; margin-right: 10px;"><input type="password" /></td>
<td><input type="submit" value="Log In" /></td>
</tr>
<tr>
<td></td>
<td style="display: flex; margin-left: 10px;"><a href="recover.html" id="forgot">Forgotten Account?</a></td>
<td></td>
</tr>
</table>
</form>
</div>
</div>
<div class="middle">
<div style="margin-left: 169px; margin-top: 5px;">
<div class="column" style="margin-right: 115px;">
<h2>Facebook helps you connect and share with the people in your life.</h2>
<img src="Images/Facebook-img2.png" alt="We are Connected" />
</div>
<div class="column">
<form action="redirect.html">
<h1>Creat an Account</h1>
<p>It's free and always will be.</p>
<table>
<tr>
<td style="display: flex; padding-right: 12px;"><input style="width: 170px;" type="text" class="big-input"/></td>
<td><input style="width: 170px;"type="text" class="big-input"/></td>
</tr>
<tr>
<td colspan="2"><input style="width: 358px;" class="dual big-input" type="text" /></td>
</tr>
<tr>
<td colspan="2"><input style="width: 358px;" class="dual big-input" type="text" /><td>
</tr>
</table>
<p>Birthday</p>
<label for="day">Date</label>
<input type="number" id="day" />
<label for="month">Month</label>
<input type="number" id="month" />
<label for="year">Year</label>
<input type="number" id="year" />
<span>Why do I need to provide my Date of birth?</span>
<input type="radio" id="male" />
<label for="female">Female</label>
<input type="radio" id="male" />
<label for="male">Male</label>
<p>By clicking Sign Up, you agree to our <a href="https://www.facebook.com/legal/terms/update">Terms,</a> <a href="https://www.facebook.com/about/privacy/update">Data Policy</a> and <a href="https://www.facebook.com/policies/cookies/"> Cookie Policy.</a> You may receive SMS notifications from us and can opt out at any time.</p>
<input type="submit" value="Sign Up" />
<p><a href="https://www.facebook.com/pages/creation/?ref_type=registration_form">Create a Page</a> for a celebrity, band or business.</p>
</form>
</div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<img style="display: flex; width: 1300px;" src="Images/last.png" alt="Last pic" />
</body>
</html>