Question

Chrome是我的主要桌面浏览器。我终于学会了如何使用right:0; left:0;水平居中绝对定位的DIV 。这在Chrome和Firefox中运行良好。

Chrome移动版不会使我的DIV居中。

一个奇怪的线索是，Chrome移动设备在网站的右下方显示空白区域。我将html，body min-width设置为650px，并处理右侧的空白区域。但我担心这只是一个我没有得到的更基本问题的创可贴。

我不确定白色空间是否与我的DIV没有任何关系，但是设置身体的最小宽度并不能解决问题。即使使用最小宽度，DIV仍然不会以移动为中心。它左对齐......似乎在非白色空间的范围内。

更新：我怀疑它确实与空白区有关，因为当我水平转动手机时，DIV 会居中。

任何比我聪明的人都知道发生了什么事吗？

我将尝试在下面发布我的代码。不会居中的DIV类设置为“PostCard”：

<html>
<head>
    <title>Haunted Bucks County (HBC)</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <script type="text/javascript" src="http://www.hauntedbuckscounty.com/jquery-2.1.1.min.js"></script>
    <!--<script type="text/javascript" src="jquery.animate-shadow.js"></script>-->
    <!--<style><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"></style>-->

    <?php
        $contents=file_get_contents("http://www.hauntedbuckscounty.com/style_theme.html");
        echo $contents;
    ?>

    <?php
        $contents=file_get_contents("http://www.hauntedbuckscounty.com/Tools/Carousel.html");
        echo $contents;
    ?>
    <style>
    .PostCard {
        border-radius: 2px 2px 2px 2px;
        height: 250px;
        width: 450px;
        box-shadow: -3px -3px 20px #000000;
        background-image:radial-gradient(circle farthest-side,#FDF6D7 0px,#DBD4B5);
    }
    html, body {
        min-width:650px;
    }
    </style>
</head>
<body style="padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;">
<div id="Viewport" style="height:100%; width:100%;
                          border:0px #FFAA00 solid;
                          margin:0px 0px 0px 0px;
    background-image:linear-gradient(black 400px, black 15%, #0E0E0F 15%, #0E0E0F, #1B1B1C);">

    <div id="Header" style="height:50px; width:100%; min-width:650px;
                            border:0px #FFAA00 solid;
                            margin:0px 0px 0px 0px;
                            background-image:radial-gradient(circle farthest-side,#1B1B1C 200px,#0E0E0F);
                            ">
    </div>

    <div id="Content" style="height:350px; width:100%; min-width:650px;
                            border:0px #FFAA00 solid;
                            margin:0px 0px 0px 0px;
                            background-image:radial-gradient(circle farthest-side,#2B2D2E 200px,#1B1B1C);
                            ">
        <div class="PostCard"
             style="position:absolute;
                    margin:30px auto 0px auto;
                    right:0;left:0;
                    border:0px #FFAA00 solid;"> <!-- SETTING "right:" AND "left:" TO "0" HORIZONTALLY CENTERS ABSOLUTELY POSITIONED ELEMENTS! -->

        </div>
    </div>

    <div id="NavContent" style="height:50px; width:100%;min-width:650px;
                            border:0px #FFAA00 solid;
                            margin:0px 0px 0px 0px;
                            background-image:radial-gradient(circle farthest-side,#1B1B1C 200px,#0E0E0F);
                            ">
    </div>


</div>




<script type="text/javascript">

    $("#BtnWeather").click(function() {
        $("#Weather").addClass("WeatherDegree0").removeClass("WeatherDegree45 WeatherDegree45Push");
        $("#Solar").addClass("SolarDegreeN45").removeClass("SolarDegree0 SolarDegree45");
        $("#Lunar").addClass("LunarDegreeN45Push").removeClass("LunarDegree0 LunarDegreeN45");
    });

    $("#BtnLunar").click(function() {
        $("#Weather").addClass("WeatherDegree45Push").removeClass("WeatherDegree0 WeatherDegree45");
        $("#Solar").addClass("SolarDegree45").removeClass("SolarDegree0 SolarDegreeN45");
        $("#Lunar").addClass("LunarDegree0").removeClass("LunarDegreeN45 LunarDegreeN45Push");
    });

    $("#BtnSolar").click(function() {
        $("#Weather").addClass("WeatherDegree45").removeClass("WeatherDegree0 WeatherDegree45Push");
        $("#Solar").addClass("SolarDegree0").removeClass("SolarDegree45 SolarDegreeN45");
        $("#Lunar").addClass("LunarDegreeN45").removeClass("LunarDegree0 LunarDegreeN45Push");
    });

</script>


</body>
</html>

更新：以下是我网站的链接：Why you no center on mobile?

Answer 1

好吧，我想我弄明白了。我将我的容器DIV设置为position：relative ，然后将内容DIV设置为position：absolute 。当我解决它时，我不能说我知道自己在做什么，但我想我知道现在有什么用。在将来，我可能会尽可能多地使用相对定位，直到我必须在容器中精确定位内容。

DIV以Chrome桌面为中心，但不是Chrome移动版

1 个答案: