我创建了自己的灯箱,问题是它显示在我的显示器上,而不是更宽的显示器或更大的分辨率。
在所有分辨率/监视器/浏览器中居中div的最佳方法是什么?
答案 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;
}