Question

我已阅读本网站上的许多帖子以及互联网上关于居中的其他内容。

在我的div的左边，有一个我无法修复的空白区域。

到目前为止，我已经尝试了

div#navigation-head{
background-image:url('img/head.png');
text-align: center;
width: 100%;
height: 2em;
position: fixed;
top: 0;
left:auto;
right:auto;

}

Answer 1

这是浏览器添加到body标记的默认填充。

你可以通过

将其归零

body { margin:0; padding:0; }

或者更好的是，在主要样式之前使用重置样式表，这样你就可以从一致的基线开始工作 - http://meyerweb.com/eric/tools/css/reset/

JSFiddle Demo

Answer 2

您需要清除html中的基本填充和边距

body{margin:0;padding:0;}

示例在这里http://jsfiddle.net/ZYfaY/3/

Answer 3

大多数元素都有默认属性，即UA样式表的产品（其中UA表示用户代理）。例如，如果您检查body元素，则默认情况下会看到他有属性。

您必须重置这些属性。

一个好的做法是包括重置CSS。

例如：

/* Reset CSS */

body, div, section, nav, ... {
   margin: 0;
   padding: 0;
}

a { text-decoration: none; } /* If you will eliminate the underline for all `a` elements */

/* The rest of reset properties */

如何添加 重置CSS ？

一个选项是在head元素中“叫他”：

<head>
 <!-- I assume that reset.css is in *css folder* -->
 <style>
  @import url("css/reset.css") screen
  @import url("css/style.css") screen
 </style>
</head>

或者从主要样式表中“给他打电话”，例如：

/* Style CSS */

@import url("reset.css") screen; /* I assume that style.css and reset.css are in the same folder */

您的问题是，在您的代码中，默认情况下您的身体有一个边距，并且您没有重置该默认属性。你必须消除推杆：

body {
   margin: 0;
   padding: 0;
}

这是DEMO

好，莱昂纳多

中心区;不太好用

3 个答案: