如何将<div>对齐到页面的中间(水平/宽度)

我有一个div标签，宽度设置为800像素。当浏览器宽度大于800像素时，它不应该拉伸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();

2017-10-21 04:02:15

其他回答

获取屏幕的宽度。然后使保证金左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';
    });
}

2018-05-25 19:55:26

旧代码中其他一些预先存在的设置将阻止div页面居中L&R:

隐藏在外部样式表链接中的其他类。其他类嵌入到像img这样的东西中(比如旧的外部CSS打印格式控件)。带有id和/或CLASSES的图例代码将与命名div类冲突。

2012-05-16 17:20:32

这也适用于ie浏览器，但汽车的利润率就不行。

.centered {
    position: absolute;
    display:  inline-block;
    left:     -500px;
    width:    1000px;
    margin:   0 50%;
}

2012-04-09 20:02:04

如果你的中心内容深在其他div，那么只有边缘可以拯救你。什么都没有。当我不使用Bootstrap这样的框架时，我总是面临这个问题。

2016-10-25 22:07:25

<body>
    <div style=" display: table; margin: 250 auto;">
        In center
    </div>
</body>

如果你想改变垂直位置，改变250的值，你可以根据你的需要安排内容。不需要给出宽度和其他参数。

2014-10-29 11:50:55

如何将<div>对齐到页面的中间(水平/宽度)

推荐文章

最新文章

标签