Question

在下面的屏幕快照中显示的缩放级别上，有线站点正常显示：

但是当我放大时，我可以看到一切都在中心。当我在图像中制作一个类似于该网站的网页并缩小时，我的图像看起来不像下面的图像。

此网页仍居中，但我的页面左对齐：

我想知道缩小网页时如何使网页居中。

<!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>

Answer 1

尝试

body {
 margin: 0 auto;
 }

这将使您的网站中心对齐，我想这就是您想要做的。

Answer 2

他们将零件对准中心。

<h1 align="center">Some text.......</h1>

这是居中对齐的，因此即使您缩小，它也将保持居中。我认为您应该在网站的中心位置添加对齐空间。

Answer 3

他们的外壳容器最有可能有一个左边距：auto;右边距：自动；属性添加了最大宽度。

这就是我在网站上拥有的功能，以使其具有这种行为。

如何居中网页内容

3 个答案: