CSS - 定位答案

【问题标题】：CSS - PositioningCSS - 定位
【发布时间】：2010-11-11 02:21:36
【问题描述】：

一个。图片 (960x7) 湾。 div（宽度：960，填充：10）

我想定位 (a)，使其距顶部 50 像素，居中。我想定位 (b)，使其位于 (a) 的正下方，没有空格。

我的 CSS 如下：

@charset "utf-8";
* {margin:0;padding:0;}
body {background-color:#999;}
.pagetop {margin:50 auto;background:url(../img/pgtop.gif) top center no-repeat;}
.page {margin:0 auto;width:960px;background-color:#fff;padding:10px;}

我的 HTML 如下：

<body>
<div class="pagetop" />
<div class="page">
<p>Warning <a href="#">sign</a>, warning sign...I see it but I...pay it no mind.</p>
</div>

我正在尝试在灰色背景上创建一个带有圆形边缘的白色容器。我怎样才能简单而智能地做到这一点？

【问题讨论】：

标签： css positioning

【解决方案1】：

看看这个问题的圆角：

CSS Rounded corners

对于对象的定位，我会采用这样的方式：

topimage {
   position: absolute;
   top: 50px;
   text-algin: center;
}

【讨论】：

轻微错字：text-algin = text-align。也许margin: 50px auto 0 auto 会更好。

【解决方案2】：

要放置元素之间没有边距，您希望顶部图像的底部边距为零：

margin: 50px auto 0;

（请注意，您必须为任何非零测量指定一个单位（例如 px）。）

背景图像不会给出顶部元素的大小，您必须指定宽度和高度以匹配图像的大小。如果高度小于一个常规字符，你需要使用一些东西来阻止 Internet Explorer 将元素扩展到一个字符行的高度，例如使用overflow: hidden; 来防止内容影响元素的大小：

width: 960px; height: 10px; overflow: hidden;

内边距被添加到元素的大小，所以你必须让page元素变窄20像素：

padding: 10px; width: 940px;

【讨论】：

谢谢你。我忘记指定测量单位，无法弄清楚为什么我设置的所有内容都被忽略了。

【解决方案3】：

如果您的圆角图片高度为 30 像素，请将 .pagetop 高度设置为 30 像素，在顶部添加 50 像素的内边距并将背景图片的顶部设置为 50 像素。

.pagetop {height:30px;padding-top:50px;margin:0 auto;background:url(../img/pgtop.gif) center 50px no-repeat;}
.page {margin:0 auto;width:960px;background-color:#fff;padding:10px;}

【讨论】：