0

我确定我忽略了一些简单的东西，但我试图将内容 div 放在页面的中心。背景图像是 16x9，我希望它保持原样，而中心内容 div 在标题 div 下方上下滑动。

这是我的html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="test.css" rel="stylesheet" type="text/css">

</head>

<body>
<div id="bod">
<div id="head">
toolbar
</div>
<div id="content">
Hello

</div>
</div>
</body>
</html>

这是我的CSS

@charset "UTF-8";
/* CSS Document */
body{
    background-image:url(images/1920w.png);
    background-size:100%;
    position:fixed;
    background-repeat:no-repeat;
    background-color:#E9C9A0;
    }

#bod{
    width:100%;
}

#head{
    position:fixed;
    margin-right:auto;
    margin-left:auto;
    width:62.5%;
}

#content{
    width:62.5%;
    height:100%;
margin-right:auto;
margin-left:auto;

}
4

3 回答 3

1

fixed ， absolute ， float 不能在页面或相邻元素上居中或对齐，它们不在文档的自然流中，也不关心显示。

但它们可以容纳内容，可以在里面流动。

#bod{
    width:100%;
    position:fixed;
    left:0;
}

#head{
    margin-right:auto;
    margin-left:auto;
    width:62.5%;
}

你实际上非常接近，#bod 必须被修复，所以#head 可以流入它:)

于 2013-06-22T00:50:38.743 回答
0

身体不需要position: fixed。

删除此规则后，div 将按预期居中，如jsFiddle所示。

于 2013-06-22T00:50:36.783 回答
0

这就是你想要的？

演示

如果是这样，我将向您解释我所做的事情：

我使用了弹性盒模型或弹性盒，但要小心！这是一个正在修订的盒子模型。

由于两件事，我冒险发布答案：

  1. 尽管我使用了已弃用的属性，但我认为浏览器（至少是我的浏览器；我使用 Chrome 27.0.1453.116 版本）不适用于新属性。
  2. 我认为学习这个规范很好，因为它是W3C 草案中所说的候选推荐。

好吧，现在我将向您解释我的所作所为：

首先，我更改了以下 css 代码：

@charset"UTF-8";

/* CSS Document */

body, div {
    margin: 0;
    padding: 0;
}

html, body { height: 100%; }

body {
    background-image:url(images/1920w.png);
    background-size:100%;
    background-repeat:no-repeat;
    background-color:#E9C9A0;
}
#bod {
    width:100%;
    height: 100%;
}
#head {
    background: navy;
    width:62.5%;
}
#content {
    background: #333;
    width:62.5%;
    height:100%;
}

我改变了一点你的 CSS 代码，因为你使用了，例如，位置：固定；但你想使元素居中。如果放置该属性，您将无法使元素居中，因为它是固定的。此外，有些元素的高度和宽度设置为 100%，但它的父级没有大小。

然后，我将以下类添加到您的 HTML 代码中：

p-flexbox和flex-vcc

在哪里：

  1. p-flexbox表示父flexbox
  2. flex-vcc表示flexbox-vertical-center-center

这是您的 HTML 代码：

<div id="bod" class="p-flexbox flex-vcc">
    <div id="head">toolbar</div>
    <div id="content">Hello</div>
</div>

最后，我提出了这些 CSS 规则：

.p-flexbox {
    /* Flexbox: Init setup */
    display: -webkit-box;
    display: -moz-box;
    display: box;
}
.flex-vcc {
    /* Flexbox: Principal setup */
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
}

干杯，莱昂纳多

于 2013-06-22T01:07:54.950 回答