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>

我已经尝试用自动替换边距，但这不起作用......

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>

中心mutliple divs和IMG

1 个答案: