Почему, т. Е. Логотип с абсолютным расположением справа?

Question

Это мой код CSS:

#header {
    width: 900px;
    margin-left: 0;
    position: relative;
    text-align: left;
    clear: left;
    float: left;
}
#logo {
    z-index:-1;
    position:absolute;
}

и HTML ...

<div style="text-align: center;">
    <div id="wrapper">
        <div id="header">
            <!--Logo-->
            <div id="logo"> <a href="http://projectstratos.com/" title="Home"><img src="logo-transparent.png" border="0"></a>
            </div>
            <!--End Logo-->
        </div>
    </div>
</div>

Логотип должен оставаться абсолютным и соответствовать моему содержанию. В Firefox это выглядит великолепно, но в том, что логотип находится справа, а не слева. Я использую центр div вместо метода margin для центрирования, т.е. он не работает!

Как мне переместить его влево?

Answer 1

Если он должен быть смещен от центра, и вы знаете ширину логотипа, вы можете установить ширину, установить влево на 50% и использовать отрицательное поле для центрирования.Затем по центру вы можете добавить к краю, чтобы получить необходимое смещение от центра.

Пример:

#logo {
    position:absolute;
    left:50%;

    margin-left:-250px; /* This negative margin gets the logo in the centre */
    /* Adjust this value to get the offset you want. If you want to have it 100px to the left make it -350px, if you want it 50px to the right make it -200px */

    width:200px;
    z-index:-1;
}

Answer 2

Можете ли вы попробовать сверху и слева?

#logo {
    top: 5px;
    left: 20px;
    z-index:-1;
    position:absolute;
}