在響應式網頁中讓固定元素置中

一般設置提示訊息小方框,都會用position:fixed的方式固定在一個位置,但若想要置中,方框的寬度又不一定,在響應式的網頁中,寬度也不一定的情況下,使用下面這樣的css是不適用的

#element{
    position:fixed;
    top:50%;
    left:50%; 
    margin-left:-100px;
    margin-top:-100px;
}

上網找了這個解答,左右設置為0,再加上讓margin auto就能讓元素在各種不同的寬度置中了

#element{
    position: fixed;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    width: 40%;
}

Leave a Reply

你的電子郵件位址並不會被公開。