Question

让我在这个问题前加上警告说我是一个自学成才（业余）的网络开发人员（而不是一个非常好的人）。我一直在努力寻找一种使用AP Divs集中网页的有效方法。我试过设置“margin：0 auto;”我试过设置“margin-left：auto;”。两者都适用于那一个div。但是我必须使用它作为内部设计的包装器，因此当我在其中放入更多div时，它们不会居中。

我可能完全接近这个错误;如果是的话，请指正。我想要做的基本版本的代码（不工作）如下。如果您运行该代码，如果我要在apDiv1中放置一个图像，它将缩小到页面大小;但是apDiv2中的文字没有。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Page</title>
<style type="text/css">
#apDiv1 {
    margin: 0 auto;
    width:600px;
}
#apDiv2 {
    position:absolute;
    width:50px;
    height:24px;
    z-index:1;
    left: 47px;
    top: 29px;
}
</style>
</head>

<body>
<div id="apDiv1">
  <div id="apDiv2">Hello</div>
</div>
</body>
</html>

Answer 1

Updated example

好的经过一些猜测和戳戳后我认为你的意思是你想要将元素绝对定位在居中对齐的包装器中。

position: absolute对于页面是绝对的，除非父级有position: relative。

#apDiv1 {
    margin: 0 auto;
    width:600px;
    position:relative;
}

Answer 2

我可以使用margin-left:auto;和margin-right:auto;将div放在另一个div的中心位置：

工作示例：http://jsfiddle.net/xjKhT/

Answer 3

在我看来，使用appdivs并不好（因为它取决于你如何在设计上定位）。你可以自己做（中心的东西），检查这个：

Centering(Simple Sample)

<style>
#header {
margin:auto;
width:600px;
background:#000;
padding:5px;
}
#title {
width:50px;
margin:auto;
background:#CCC;
padding:5px;
}
</style>

<div id="header">
   <div id="title">Hello World</div>
</div>

自定义AppDivs添加额外的样式，这不是必需的：）

带Div的中心网页

3 个答案: