Question

无论我做什么，在浏览器中查看时，我都无法将我的网站置于中心位置：/。我已经遍布google / youtube并尝试了一切。此时非常恼火。

下面是代码：

<!doctype html>
<html>
<head>
<title>01_Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Save for Web Styles (01_Home.psd) -->
<style type="text/css">
<!--

#Table_01 {
  overflow: hidden;
  min-width: 1600px;
	
}

#id01-Home {
	position:relative;
	width:1600px;
	height:8226px;
	margin:0 auto;
	}

-->
</style>
<link href="style.css" rel="stylesheet" type="text/css">
<!-- End Save for Web Styles -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0; margin-right: 0px;">
<!-- Save for Web Slices (01_Home.psd) -->
<div id="Table_01">
	<div id="id01-Home">
		<img src="images/01_Home.jpg" width="1600" height="8226" alt="">
	</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>

Answer 1

我建议您将以下样式应用于BODY标记：

  text-align:center;

然后使用以下样式创建外部容器（例如DIV.container）：

 text-align:left;
 width: 50%;
 margin: 0 auto;

删除所有其他样式，直到您有效，然后重新添加所需的任何样式。

这是一个例子： https://jsfiddle.net/wshobaqh/ （对不起，我无法弄清楚如何将片段应用到SO中）

Answer 2

对于宽度超过1600像素的屏幕（这似乎是您唯一关注的问题），您只需将margin: 0 auto;添加到#Table_01即可居中。但是在这个宽度以下，你需要一种完全不同的方法。

详细信息取决于您的代码中不可见的实际内容和布局 - 或者该图片是否真的是您唯一的内容？如果是，我建议使用宽度的百分比值（如图像及其父元素的100％宽度），以便能够在较小的屏幕上查看整个图像。

CSS - 网站不会以浏览器为中心

2 个答案: