Question

嗨我有一个元素，我想在屏幕尺寸改变时重新定位。我希望它从固定位置更改为页面中心。 CSS代码如下所示：

#symboler {
    position:fixed;
    top:5px;
    right:20px;}

@media screen and (max-width: 766px) {
        #symboler {display:block; position:relative; margin:0 auto;}
}

Answer 1

您是否在寻找类似fiddle的内容？

<强> HTML

<div id="symboler"></div>

<强> CSS

* {
    margin: 0; // reset browser value
    padding: 0; // reset browser value
}

#symboler {
    position:fixed;
    top:5px;
    right:20px;
    height: 200px; // just to display a red cube
    width: 200px; // just to display a red cube
    background: red; // just to display a red cube
}

@media screen and (max-width: 766px) {
    #symboler {
        display:block; // you can remove this if you are using a block element like div
        position:relative;
        margin:0 auto;
        right:0; // reset your value
    }
}

Answer 2

尝试添加

float:none;
width: 450px //specify width accurately in pixel or em
margin : 0 auto;
position:relative;

Answer 3

选中此Demo jsFiddle

CSS

#symboler {
    position:fixed;
    top:5px;
    right:20px;
    height: 200px;
    width: 200px;
    background: red;
}
@media screen and (max-width: 766px) {
    #symboler {
        display:block;
        position:relative;
        margin:0 auto;
        right:0;
    }
}

使用媒体查询重新定位元素，

3 个答案:

CSS