CSS绝对不起作用

时间：2013-11-16 13:12:10

标签： html css

我试图让一些图标在屏幕中间对齐，我不确定它为什么不起作用 CSS：

#Main{
    position: absolute;
    top: 50%;
    left: 50%;
}

HTML：

<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <div id='Main'>
            <a href="https://me.rx14.co.uk/OwnCloud/" target="_self"><img alt="OwnCloud" src="https://me.rx14.co.uk/img/owncloud.png" style="width: 250px; height: 250px;" /></a>&nbsp;
            <a href="http://me.rx14.co.uk:8080/"><img alt="" src="https://me.rx14.co.uk/img/jenkins.png" style="width: 250px; height: 250px;" /></a>&nbsp;
            <a href="https://me.rx14.co.uk/solder/"><img alt="Solder" src="https://me.rx14.co.uk/img/solder.png" style="width: 250px; height: 250px;" /></a><br />
            <a href="https://me.rx14.co.uk/wx/"><img alt="" src="https://me.rx14.co.uk/img/wx.png" style="width: 250px; height: 250px;" /></a>&nbsp;
            <a href="https://me.rx14.co.uk/munin/"><img alt="" src="https://me.rx14.co.uk/img/munin.png" style="width: 250px; height: 250px;" /></a>&nbsp;
            <a href="https://me.rx14.co.uk/munin-live/"><img alt="" src="https://me.rx14.co.uk/img/munin_live.png" style="width: 250px; height: 250px;" /></a>
        </div>
    </body>
</html>

结果：Result of code!

2 个答案:

答案 0 :(得分：2)

你应该给元素

margin-left:-[ELEMENT_WIDTH/2]px

和

margin-top:-[ELEMENT_HEIGHT/2]px

在您的情况下（基于这些图像的宽度和高度）可以是：

#Main { position:absolute; top:50%; left:50%; margin:-375px 0 0 -375px; }

（如果里面的元素没有边距，相同的宽度和高度等）

或者这个：

#Main { position:absolute; top:50%; left:50%; margin:-255px 0 0 -383px; }

（这是EJanuszewski建议的情况）

答案 1 :(得分：2)

正如凯文所说，你需要负边距来做到这一点，见下面的例子。

你的#main div的宽度为766，除以2 = 383，这是你的负余量 - 左边。 它的高度为510，除以2 = 255，即负边缘顶部。

http://jsfiddle.net/EPs2L/

HTML：

    <div id='Main'>
        <a href="https://me.rx14.co.uk/OwnCloud/" target="_self"><img alt="OwnCloud" src="https://me.rx14.co.uk/img/owncloud.png" style="width: 250px; height: 250px;" /></a>&nbsp;
        <a href="http://me.rx14.co.uk:8080/"><img alt="" src="https://me.rx14.co.uk/img/jenkins.png" style="width: 250px; height: 250px;" /></a>&nbsp;
        <a href="https://me.rx14.co.uk/solder/"><img alt="Solder" src="https://me.rx14.co.uk/img/solder.png" style="width: 250px; height: 250px;" /></a><br />
        <a href="https://me.rx14.co.uk/wx/"><img alt="" src="https://me.rx14.co.uk/img/wx.png" style="width: 250px; height: 250px;" /></a>&nbsp;
        <a href="https://me.rx14.co.uk/munin/"><img alt="" src="https://me.rx14.co.uk/img/munin.png" style="width: 250px; height: 250px;" /></a>&nbsp;
        <a href="https://me.rx14.co.uk/munin-live/"><img alt="" src="https://me.rx14.co.uk/img/munin_live.png" style="width: 250px; height: 250px;" /></a>
    </div>

CSS：

#Main{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left:-383px;
    margin-top:-255px;
}
相关问题
最新问题