如何使此页面上的所有内容居中并完全响应所有浏览器？

Question

链接到我的网站：http://foxweb.marist.edu/users/kf79g/contact.php

我的联系页面有问题。无论屏幕尺寸如何（即使您将窗口调整到最小可能的宽度），我都希望整个事物都能居中并响应。注意：不要管大/桌面屏幕，这就是我希望它看起来的样子，除非你找到一种方法来使表单宽度更大且响应更快。我试图使整个页面以中小屏幕为中心。然而，随着页面的缩小，中心属性测量值有所偏离。这样做的原因是有些必须不同，以便它看起来适合旧版浏览器。社交偶像也给我带来了麻烦。有什么方法可以使整个事情以所有设备和浏览器为中心？我尽我最大的努力进行测量。任何帮助将不胜感激。

以下是我希望解决的问题：

火狐： 在中等页面上，表单超出范围。 在小页面上，当页面较小时，表单会缩小。 在小页面上，社交图标一团糟。 在中小页面上，表单居中不均。

IE 7： 在中页和小页上，社交图标很乱。 在小页面上，表单超出范围。 表单在小屏幕上并没有缩小。 在中小页面上，表单居中不均。

IE 8： 在小页面上，表单正在缩小。 在中小页面上，表格的中心不均匀。 社交图标并没有那么糟糕。

HTML：

<section>

            <div id='main_section'>
                <div id = "center">
                <div id='details_section'> 
                <br/>

                    <h2> Stay in touch </h2><br/>
                    <p>I love getting feedback regarding all my projects, works, and services. You can use the quick contact form to leave a message, comments and questions.</p><br/>
                    <p>Your name and e-mail address are never shared, I just use them when I need to get back to you.</p><br/>


                    <h2> Social networks </h2><br/>
                    <div id = "center_icons">
                        <a href="https://www.facebook.com/lenny.pfautsch" target="_blank"><img src="images/facebook.png" alt="facebook" style="margin:1px;"></a> 

                        <a href="https://plus.google.com/113122168458946246215/posts" target="_blank"><img src="images/google-plus.png" alt="google plus" style="margin:1px;"></a>

                        <a href="http://www.linkedin.com/pub/leonard-pfautsch/53/b34/1a2" target="_blank"><img src="images/linkedin.png" alt="linkedin" style="margin:1px;"></a>

                        <a href="https://github.com/LeonardPfautsch" target="_blank"><img src="images/github.png" alt="github" style="margin:1px;"></a>
                    </div>
                <br/>

                </div>
                </div>

                <div id = "center">
                <div id='contact_section'>
                    <form method='POST' action='contact.php'>
                    <span class='label'>Name:</span><br/>
                    <input type='text' class='textfield' name='name' size='50' maxlength='50'><br/>
                    <span class='label'>Email:</span><br/>
                    <input type='text' class='textfield' name='email' size='50' maxlength='50'><br/>
                    <span class='label'>Subject:</span><br/>
                    <input type='text' class='textfield' name='subject' size='50' maxlength='50'><br/>
                    <span class='label'>Message:</span><br/>
                    <textarea rows='5' cols='50' name='message' id='textarea' maxlength='500'></textarea><br/>
                    <input type='submit' value='Send' id='submit' name='action'> 
                    </form>
                </div>
                </div>


            </div>
        </section>

主要 CSS：

#details_section {

    max-width:100%;
    float:left;
    margin-right:20px;


}


#contact_section {
    max-width:100%;
    margin-bottom:40px;
    margin-right: 0px;

    margin-top:20px;
    padding:20px; /*Make this smaller for 100% responsiveness*/
    border-radius:10px;
    background:#f1f1f1;
    box-shadow:0px 0px 15px #272727; 
    float:right;
}


#submit {
    padding:0px 8px;
    background:#c4c4c4; 
    width:115px;
    height:33px;
    border-radius:10px;
    border:1px solid #8d8d8d;
    max-width:100%;
}
#submit:hover {
    background:#a8a8a8;
    cursor: pointer;
}

div.button input {
padding:0px 8px;
    background:#c4c4c4; 
    width:80px;
    height:30px;
    border-radius:10px;
    border:1px solid #8d8d8d;
    margin:1px;
    max-width:100%;
}

div.button input:hover {
background:#a8a8a8;
    cursor: pointer;
}

大屏幕：

#details_section {
    width:320px;
}

中等屏幕：

#center{
width: 465px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#center_icons{
width: 228px; /*this value is changing for IE and chrome*/
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#contact_section {
width:450px;

}

#details_section {
    width: 450px;
    text-align:justify;
}

#details_section h2 {
    width: 450px;
    text-align:center;

}

textarea, input[type="text"] {
    width: 100%;
    max-width: 450px;
}

textarea{
    max-width: 450px;
    height: 150px;
}

小屏幕：

#center{
width: 465px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#center_icons{
width: 228px; /*this value is changing for IE and chrome*/
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#contact_section {
width:450px;

}

#details_section {
    width: 450px;
    text-align:justify;
}

#details_section h2 {
    width: 450px;
    text-align:center;

}

textarea, input[type="text"] {
    width: 100%;
    max-width: 450px;
}

textarea{
    max-width: 450px;
    height: 150px;
}

Answer 1

我建议使用元素检查器来让页面看起来恰到好处。所有现代浏览器都包含它们。看起来你所需要的只是在这里和那里进行一些小的 CSS 调整。例如，您可以在中小型布局中将输入设置为不同的宽度（第 116 行更改为 width:90%）。

正确理解 box-sizing 及其工作原理非常重要。似乎复合边距和填充是导致元素溢出的原因。 http://css-tricks.com/box-sizing/