html - 居中多个 div 和一个 IMG

Question

我正在创建一个网站，现在如果我想将多个 div 居中，它会以 1920 x 1080 的分辨率居中，但它不会以较小的分辨率...请帮助...这是我的代码:

    <style>
            p       {color:white; font-size: 150%; font-family: verdana; margin-top: 7.5%; }
            body {margin:0 auto; padding:0; }
            a {text-decoration: none}
            div {  background-color:blue; position:absolute;padding:0; margin:0; text-align: center; }
            img {position:absolute;padding:0; margin:0;}
            div:hover {background-color: f900fe}

            #logo { float:right; margin:0 auto; padding:0; position:absolute;left:25.9%; margin-left:-95px; width:200px; height:56px; margin-top:0%; min-height:56px; max-height:56px ; min-width: 56px; max-width: 56px}

            #home { float:right;margin:0 auto; padding:0;position:absolute;left:25.9%; margin-left:-39px; width:200px; height:6%; margin-top:0%;  min-height:56px; max-height: 56px; min-width:10.42%;}

            #video { float:right;margin:0 auto; padding:0; position:absolute;left:25.9%; margin-left:158px; width:200px; height:6%; margin-top:0%; min-height:56px; max-height: 56px; min-width:10.42%;}

            #contact {  float:right;margin:0 auto; padding:0;position:absolute;left:25.8% ; margin-left:358px; width:200px; height:6%; margin-top:0%;  min-height:56px; max-height: 56px; min-width:10.42%}




    </style>

<a href='index.php'>
<div  id='home' title='Ga naar de homepage'>
    <p> <strong> Home </P>
    </div>
</a>

    <a href='Contact/index.php'>
    <div id='contact' title='Neem contact met ons op'>
    <p> <strong> Contact </p>
    </div>
</a>

<div id='Video' title="Bekijk onze video's!">
    <a href='video/index.php'>
<p> <strong> Video's </p></div>
</a>
    <a href='index.php'>   

<img title='Ga naar de homepage' id='logo' src='img/logo.jpg' />
</a>

我已经尝试用 auto 替换边距，但那行不通......

Answer 1

我建议使用类似 http://getbootstrap.com/ 的框架或 http://foundation.zurb.com/docs/ .这些使您能够快速轻松地处理网格系统，并且您可以指定您希望起始宽度的大小等。例如，在 zurb 中它看起来像这样。

<div class="row">
    <div class="large-4 columns">
        <a href='index.php'>
            <div id='home' title='Ga naar de homepage'>
                <p> <strong> Home </P>
            </div>
        </a>
    </div>
    <div class="large-4 columns">
            <a href='Contact/index.php'>
                <div id='contact' title='Neem contact met ons op'>
                    <p> <strong> Contact </p>
                </div>
            </a>
    </div>
    <div class="large-4 columns">
        <div id='Video' title="Bekijk onze video's!">
            <a href='video/index.php'>
                <p> <strong> Video's </p></div>
            </a>
            <a href='index.php'>   
                <img title='Ga naar de homepage' id='logo' src='img/logo.jpg' />
            </a>
        </div>
    </div>
</div>