如何将Div划分为所有监视器/分辨率/浏览器?

时间:2009-12-02 06:04:45

标签: javascript css html

我创建了自己的灯箱,问题是它显示在我的显示器上,而不是更宽的显示器或更大的分辨率。

在所有分辨率/监视器/浏览器中居中div的最佳方法是什么?

7 个答案:

答案 0 :(得分:5)

尝试使用此

将父div样式设为中心,并将margin: 0 auto;用于子div

#parentDiv{
text-align: center;
}

#main{
margin:0 auto;
width:755px;
text-align: left;
}

<div id="parentDiv"><div id="main">Content</div></div>

答案 1 :(得分:5)

水平,垂直还是两者都居中?如果你想要两者,this过去对我有用。否则,答案sathish posted适用于仅水平居中

答案 2 :(得分:2)

#center {position:absolute; width:400px; height:400px; left:50%; top:50%; margin:-200px /must be half of the height/ 0 0 -200px; /must be half of the width/}

将div水平和垂直居中。关于其第一个父级的位置:relative;

答案 3 :(得分:0)

如果您知道宽度:

<div></div>

div {
  left: 50%;
  margin-left: -50px; /* width / 2 */
  width: 100px;
}

答案 4 :(得分:0)

如果您使用

将所有内容设置为居中
*{margin:0 auto;}

除非另有说明,否则它会将文档中的任何内容放在中心

或者您可以使用包装器div

div#wrapper {margin:0 auto;}

如果您使用旧浏览器,则应使用

div#wrapper {text-align:center;}

有30种方法可以做,有点取决于你在做什么......

这些是最容易的

答案 5 :(得分:0)

在div上设置宽度,然后给它一个居中的类:

.center
{
margin:0 auto;
}

它将集中在任何浏览器中。

答案 6 :(得分:0)

尽管上面的所有答案看起来都是正确的,但我自己也被困在了一下。这是我的简化方法。

我们假设您拥有以下代码,并希望将内容集中在div&#39; storyline-container&#39;。

<body>
    <div class="storyline-container">
        <script src=storyline.js type="text/javascript"></script>
    </div>
</body>

简单地编写下面的代码不会起作用,因为你还需要对父div进行居中对齐,在这种情况下,父div是&#39; body&#39;

.storyline-container 
{
    text-align: center;
}

在css文件中添加以下代码以解决您的问题。

body{
    text-align: center;
}