我有一个div标签,宽度设置为800像素。当浏览器宽度大于800像素时,它不应该拉伸div,但应该将它带到页面的中间。
当前回答
旧代码中其他一些预先存在的设置将阻止div页面居中L&R:
隐藏在外部样式表链接中的其他类。 其他类嵌入到像img这样的东西中(比如旧的外部CSS打印格式控件)。 带有id和/或CLASSES的图例代码将与命名div类冲突。
其他回答
在我的情况下,手机屏幕大小是未知的,这是我所做的。
HTML
<div class="loadingImg"></div>
CSS
.loadingImg{
position: fixed;
top: 0px;
left: 0px;
z-index: 9999999;
border: 0;
background: url('../images/loading.gif') no-repeat center;
background-size: 50px 50px;
display: block;
margin: 0 auto;
-webkit-border-radius: 50px;
border-radius: 50px;
}
JavaScript(在需要显示此DIV之前)
$(".loadingImg").css("height",$(document).height());
$(".loadingImg").css("width",$(document).width());
$(".loadingImg").show();
如果你有一些常规的内容,而不是只有一行文本,我所知道的唯一可能的原因是计算空白。
这里有一个例子:
HTML
<div id="supercontainer">
<div id="middlecontainer">
<div class="common" id="first">first</div>
<div id="container">
<div class="common" id="second">second</div>
<div class="common" id="third">third</div>
</div>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
}
.common {
border: 1px solid black;
}
#supercontainer {
width: 1200px;
background: aqua;
float: left;
}
#middlecontainer {
float: left;
width: 104px;
margin: 0 549px;
}
#container {
float: left;
}
#first {
background: red;
height: 102px;
width: 50px;
float: left;
}
#second {
background: green;
height: 50px;
width: 50px;
}
#third {
background: yellow;
height: 50px;
width: 50px;
}
因此,#supercontainer是你的“整个页面”,它的宽度是1200px。
# middlecontaintainer是你的网站内容的div;宽度为102px。在已知内容宽度的情况下,您需要将页面大小除为2,并从结果中减去内容宽度的一半: 1200 / 2 - (102 / 2) = 549;
是的,我也看到这是CSS的严重失败。
获取屏幕的宽度。 然后使保证金左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';
});
}
将这个类添加到你想居中的div(它应该有一个设置的宽度):
.marginAutoLR
{
margin-right:auto;
margin-left:auto;
}
或者,添加边缘到你的div类,像这样:
.divClass
{
width:300px;
margin-right:auto;
margin-left:auto;
}
<body>
<div style="width:800px; margin:0 auto;">
centered content
</div>
</body>
推荐文章
- 如何让一个按钮将我的页面重定向到另一个页面?
- 有一个固定的位置div,需要滚动,如果内容溢出
- 如何让元素被点击(对于整个文档)?
- Node.js上的html解析器
- 大写还是小写文档类型?
- 样式化HTML电子邮件的最佳实践
- CSS可以在元素中的每个单词后强制换行吗?
- CSS/HTML:什么是使文本斜体的正确方法?
- 我如何才能在表中应用边界?
- 如何使一个DIV不包装?
- 使用jQuery以像素为整数填充或边距值
- CSS div元素-如何显示水平滚动条只?
- 如何指定一个元素后包装在css flexbox?
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 使用“!”的含义是什么?重要的”?