我正在为一部正在上映的电影设计一个网站，但在让它适应所有浏览器窗口大小和屏幕大小时遇到了一些问题。本质上，例如启动页面的标记，在页面顶部有电影徽标，在其下方有一个视频（电影预告片），然后是一个将用户带到主页的输入按钮。所有这些都应该以所有浏览器窗口大小为中心。但是，当我尝试不同的尺寸等时，内容不会保持居中，并且视频会从背景图像中移开。我将如何用 CSS 解决这个问题？
还有一些其他页面，即概要、视频，然后是捐赠给项目的页面。我希望这些以相同的方式工作，保持内容在所有尺寸上都能正常工作。谢谢！
如果你想看看这个并明白我的意思，链接是http://rescuedthemovie.com/new/home。这是开发页面，基本上没有最终设计，所以有点乱，但你可以看到我在说什么。
杰温顿
【问题讨论】：
标签： css fluid-layout
听起来您在页面上定位元素的方式存在问题。看看：
【讨论】：
只需将此添加到您想要居中的任何 div 中。这应该适用于所有浏览器，并且无论分辨率如何，都会使所有内容居中。
#div {
margin:0 auto;
text-align:center;
}
我建议将其用于主要内容 div，这样所有内容都居中，然后为视频、链接等创建单独的 div。这样您就可以将它们放置在居中的 div 内您想要的位置..
【讨论】：
我不明白你的设计。我看到以下问题。
您有一个div id="container"，但它包含的唯一内容是div id="fotter"。其余所有元素都在容器 div 的“外部”。
您有一个div id="logo"，其样式为margin-top: 1%; margin-left: 25%;。这将如何居中呢？
您的div id="slider" 有position: relative; left: 26%; top: 3em;，这意味着它被从左侧推了26%，从原始位置顶部推了3em，并在原来的位置留下了一个“间隙”。
您的h1 有一个margin: left; 300px;。您究竟希望它在哪里？
在h1 之下你有包含div 元素的a 元素？这就像内联元素中的块级元素。完全错误。所有这些a 元素都应该在div 内，而div 应该被定位。
您的div#footer 在
div#container。 div#foooter
风格为position: absolute
而div#container 确实不
有一个position: relative。这个
导致两件事。 div#container
崩溃，因为它没有任何
内容和div#fotter 是
相对于浏览器定位
窗口。
你有 3 个div#recent。 ID 必须是唯一的。这是不允许的。使用类。
我会给出一个关于如何去做的概要。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rescued: The Movie</title>
<link rel="stylesheet" href="my_styles.css">
</head>
<body>
<div id="container">
<div id="logo">
<a href="http://rescuedthemovie.com"><img src="http://rescuedthemovie.com/new/images/logo.png" alt="Rescued Logo" /> </a>
</div>
<div id="nav">
<ul>
<li><a href="http://rescuedthemovie.com/home.html">home</a></li>
<li><a href="http://rescuedthemovie.com/synopsis.html">synpsis</a></li>
<li><a href="http://rescuedthemovie.com/videos.html">videos</a></li>
<li><a href="http://rescuedthemovie.com/blog.html">blog</a></li>
<li><a href="http://rescuedthemovie.com/partner.html">partner</a></li>
</ul>
</div>
<div id="slider">
<img src="http://rescuedthemovie.com/images/slides/slide1.jpg" alt="Slide 1" />
<img src="http://rescuedthemovie.com/images/slides/slide2.jpg" alt="slide 2" />
<img src="http://rescuedthemovie.com/images/slides/slide3.jpg" alt="slide 3" />
</div>
<div id="blog">
<h1>NEWS</h1>
<div class="recent">
<h2>The Putnam's Adoption Journey</h2>
<a href="http://rescuedthemovie.com/blog">My husband and I thought our family was complete. We had our two children (one boy and one girl) and were completely satisfied with that. Life was comfortable. My youngest had just started Kindergarten so I found myself with more free time than I had had in nine years! I was enjoying the freedom of grocery shopping without toddlers. But then God started stirring something in our hearts...</a>
</div>
<div class="recent">
<h2>God's Divine Leading: Part 3</h2>
<a href="http://rescuedthemovie.com/blog">I remember feeling a little surprised that she had decided on adoption. I guess I just assumed that she would opt to keep her baby. I have to admit that I did wonder for a fleeting moment if perhaps the Lord was trying to lead Jurgen and I to adopt her baby, but then reasoned that a domestic adoption might be too risky. People might also think it strange, since I was the one who encouraged her to consider adoption in the first place, rather than end her baby’s life...</a>
</div>
<div class="recent">
<h2>God's Divine Leading: Part 2</h2>
<a href="http://rescuedthemovie.com/blog">When I awoke, I had an overwhelming desire to have a baby of our own. The dream was extraordinarily real and tangible, and I felt strongly that the Lord had given me this dream as an answer to my questions about pursuing adoption. I am not the type of person who normally bases my decisions on dreams, but this was different. It was as if the Lord Himself had dropped this desire into my heart...</a>
</div>
<a id="more" href="http://rescuedthemovie.com/blog">Read More</a>
</div>
<div id="footer">
<p>©2011 Rescued</p>
</div>
</div>
</body>
</html>
CSS
{
margin: 0;
padding: 0;
}
img
{
border: 0;
}
a
{
text-decoration: none;
color: #000;
}
body
{
background: url("http://rescuedthemovie.com/new/css/../images/blog_bg.jpg") no-repeat scroll center top #000;
}
div#container
{
width: 960px;
margin: 20px auto;
margin-bottom: 0;
}
div#logo
{
width: 850px;
height: 300px;
margin: 0 auto;
}
div#logo a
{
width: 100%;
height: 100%;
display: block;
}
div#nav
{
background: url("http://rescuedthemovie.com/new/css/../images/nav.png") no-repeat scroll 0 0 transparent;
font-size: 25px;
text-transform: uppercase;
}
div#nav ul
{
width: 900px;
margin: 10px auto;
}
div#nav ul li
{
display: inline-block;
margin: 0 40px;
color: #FFF;
}
div#nav ul li a
{
color: #FFF;
}
div#slider
{
width: 500px;
height: 250px;
margin: 0 auto;
margin-top: 77px;
float: right;
position: relative; /*romove this in the final design*/
}
div#slider img /*romove this in the final design*/
{
position: absolute;
top: 0;
left; 0;
}
div#blog
{
float: left;
width: 450px;
color: #FFF;
margin-bottom: 50px;
}
div#blog h1
{
margin: 20px 0;
}
div#blog a#more
{
float: right;
color: red;
}
div.recent
{
margin: 20px 0;
border: 1px solid #555;
padding: 5px;
}
div.recent h2
{
font-weight: bold;
color: #777;
margin-bottom: 10px;
}
div.recent a
{
color: #FFF;
}
div#footer
{
clear: both;
color: #FFF;
text-align: center;
font: 25px;
margin: 20px auto;
}
div#footer p
{
font-size: 25px;
}
这个offcouse是一个固定宽度的布局。但是您可以轻松地将其更改为流体或 estalic。看起来是这样的
【讨论】：