在 HTML 和 CSS 中居中 div，但在移动屏幕上被截断答案

【问题标题】：Centering divs in HTML and CSS but cut-off on mobile screens在 HTML 和 CSS 中居中 div，但在移动屏幕上被截断
【发布时间】：2012-09-15 20:44:44
【问题描述】：

我在 CSS 方面遇到了一些实际问题！

我进行了以下设置以使#Box div 居中，它可以在除移动浏览器之外的所有设备上完美运行。因为移动浏览器的屏幕尺寸太窄了，左手边一直被截断。我之前问过类似的问题，并试图调整它无济于事。

自上次以来我已将容器和布局 div 放入，但仍然出现同样的问题。有什么办法可以调整代码，使左侧不会一直被砍掉？

    .pageContainer {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: auto;
        padding-left: 1.82%;
        padding-right: 1.82%;
        position:relative; }

    #LayoutDiv1 {
        clear: both;
        margin: auto;
        width: 100%;
        display: block;
        text-align:center;
        position: relative; }

    #Box {
        width: 487px;
        height: 181px;
        position: absolute;
        left: 50%;
        top: 236px; 
        margin-left: -244px;
        z-index:6; }

html：

    <body>
<div class="pageContainer">
    <div id="LayoutDiv1">
    <div id="Twitter">
    <a href="http://www.twitter.com/wekaptureit" target="new"><img     src="images/TwitterNORMAL.png" onmouseover="this.src='images/TwitterHOVER.png'" onmouseout="this.src='images/TwitterNORMAL.png'"/></a>
    </div>

<div id="Facebook">
<a href="http://www.facebook.com/wekaptureit" target="new"><img src="images/fbNORMAL.png" onMouseOver="this.src='images/fbHOVER.png'" onMouseOut="this.src='images/fbNORMAL.png'"/></a>
</div>

<div>
<img id="Box" src="images/BOX.png" width="487" height="181">
</div>

    </div>
    </div>
    </body>

【问题讨论】：

我们也可以查看您的 HTML 吗？可能在 www.jsfiddle.net 示例中？
处理它们的专业方法是媒体查询...
这里你的.pageContainer 的布局因为padding 而出现在屏幕上。这可能会导致问题。尝试给width:96.36% 而不是100%。这将使您的布局适合屏幕。否则删除padding。
尝试box-sizing : border-box检查填充是否不是罪魁祸首。

标签： iphone css html center

【解决方案1】：

2012 年更明智的做法是使用Media Queries、some inspiration here

您基本上创建了另一个样式表，它只为较小的屏幕加载。现在看起来可能有点矫枉过正，但随着您网站的发展，您会感谢我的建议（或者您不能；））

另外，不要使用margin-left: -244px;，它很hacky，可能会导致跨浏览器问题。向我们展示一些 HTML，我们将向您展示一种更简洁的方式。

【讨论】：

您好 rizwaniqbal，感谢您的回复。我已经包含了页面的基本 html。非常感谢一种更清洁的方式！谢谢

【解决方案2】：

您是否包含视口元标记？它应该消除您在移动设备中可能遇到的任何缩放问题。 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

对于 CSS：<div>s 是块元素，它们的默认行为是扩展其父级的宽度 (100%)。那些 CSS 声明不是必需的。

从您的代码和布局来看，您似乎不需要#LayoutDiv1 或使用定位。

这个更简单的代码负责左侧截断 (here's a fiddle)：

.pageContainer {
    margin:0 auto;
}

#LayoutDiv1 {
        margin: auto;
        text-align:center;
}

#Box {
    width: 487px;
    height: 181px;
    top: 236px; 
    margin:236px auto 0;
}

就像之前提到的海报一样，您可以添加一个@media 查询来为移动设备上的#Box 加载较小的图像（您可以简单地在现有的 CSS 文件中添加一两行 [或 200] 行）：

@media only screen and (max-width: 767px) {
    #Box { background:url('imgs/mobile-hero.jpg'); }
}

【讨论】：