我有一个div标签,宽度设置为800像素。当浏览器宽度大于800像素时,它不应该拉伸div,但应该将它带到页面的中间。
当前回答
<body>
<div style=" display: table; margin: 250 auto;">
In center
</div>
</body>
如果你想改变垂直位置,改变250的值,你可以根据你的需要安排内容。不需要给出宽度和其他参数。
其他回答
只需在body标签之后使用center标签,并在body结束之前结束center标签:
<body>
<center>
... Your code here ...
</center>
</body>
在我尝试过的所有浏览器中,这都是可行的。
获取屏幕的宽度。 然后使保证金左25% 使利润率达到25%
通过这种方式,容器的内容将位于中间。
示例:假设容器宽度= 800px;
<div class='container' width='device-width' id='updatedContent'>
<p id='myContent'></p>
<contents></contents>
<contents></contents>
</div>
if ($("#myContent").parent === $("updatedContent"))
{
$("#myContent").css({
'left': '-(device-width/0.25)px';
'right': '-(device-width/0.225)px';
});
}
这可以通过flex容器轻松实现。
.container{
width: 100%;
display: flex;
height: 100vh;
justify-content: center;
}
.item{
align-self: center;
}
预览链接
如果你的中心内容深在其他div,那么只有边缘可以拯救你。什么都没有。当我不使用Bootstrap这样的框架时,我总是面临这个问题。
旧代码中其他一些预先存在的设置将阻止div页面居中L&R:
隐藏在外部样式表链接中的其他类。 其他类嵌入到像img这样的东西中(比如旧的外部CSS打印格式控件)。 带有id和/或CLASSES的图例代码将与命名div类冲突。