Позиционирование элемента с медиа-запросами,

Question

Позиционирование элемента с медиа-запросами,

0

Привет, У меня есть элемент, который я хочу изменить, когда изменяется размер экрана. Я хочу, чтобы он изменился с фиксированной позиции на центр страницы. Код CSS выглядит так:

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

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

Delal 17 март 2014, в 14:20

Источник

0

так что не работает?
T J 17 март 2014, в 12:43
0

Элемент движется вверх в левый угол.
Delal 17 март 2014, в 12:45
0

как кто-то может знать, что не так, не видя остальную часть вашего html и css ?
T J 17 март 2014, в 12:48
0

@ TilwinJoy, видимо, они могут!
Delal 17 март 2014, в 12:58
0

если ваша страница в значительной степени «пуста», как видно из предоставленной скрипки, они не смогут. Отзывчивость и расположение элемента сильно зависит от макета страницы и других элементов.
T J 17 март 2014, в 13:18
0

@ Делай больше, отдай, лучше мы сможем помочь. У TilwinJoy есть хорошая точка зрения. В следующий раз поделись больше, если сможешь. :)
aloisdg 17 март 2014, в 14:23

Показать ещё 4 комментария

Теги:

html

css

3 ответа

0

Попробуйте добавить

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

Adidev 17 март 2014, в 11:13

0

Проверьте это демо 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;
    }
}

Jay Patel 17 март 2014, в 10:40

Ещё вопросы

Элемент движется вверх в левый угол.
как кто-то может знать, что не так, не видя остальную часть вашего html и css ?
если ваша страница в значительной степени «пуста», как видно из предоставленной скрипки, они не смогут. Отзывчивость и расположение элемента сильно зависит от макета страницы и других элементов.
@ Делай больше, отдай, лучше мы сможем помочь. У TilwinJoy есть хорошая точка зрения. В следующий раз поделись больше, если сможешь. :)

aloisdg · Accepted Answer · 2014-03-17T09-53-00.000Z

Вы ищете что-то вроде этой скрипки?

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
    }
}