горизонтально установленное положение неподвижного элемента

Question

горизонтально установленное положение неподвижного элемента

0

У меня есть система уведомления, которую я создаю в jquery, и я пытаюсь горизонтально центрировать div контейнера уведомлений.

Я пробовал left:50%; , margin:0 auto; , и 'left: 50%; и право: 50%; ни одна из которых не работает.

Поэтому я прибегал к оценке центра с чем-то вроде left:40%; , но это будет работать только для одного из небольшого диапазона видовых экранов, и мне нужно, чтобы это работало как можно больше видовых экранов.

Поэтому я решил использовать медиа-запросы, чтобы дать разные left значения на основе ширины видового экрана. Однако при тестировании я заметил даже в небольших видовых экранах, медиа-запрос не работает, и он берет стиль на самой большой точке останова.

Почему это? И как я могу правильно горизонтально настроить уведомление так же, как и больше видовых экранов.

Вот сценарий JS с стилем и кодом для запуска уведомления, просто щелкните в любом месте, чтобы вызвать уведомление: http://jsfiddle.net/Q6TUr/

И вот страница, на которой я пытаюсь заставить все это работать, щелкнуть в любом месте серого фона и запустить уведомление: http://goo.gl/Dalkqh

Я был бы очень признателен, если бы кто-то помог мне, как правильно разобраться, как правильно настроить уведомление по горизонтали во всех видовых экранах.

gomangomango 28 нояб. 2013, в 18:34

Источник

Теги:

html

css

4 ответа

Ещё вопросы

Tom Chung · Answer 1 · 2013-11-28T15-50-00.000Z

0

element.style.marginLeft = -element.offsetWidth/2+'px';

Более гибкий метод.

Не удалось показать результат на основе вашего JS Fiddle. Вы не предоставляете оригинальный сценарий... извините, я не могу это прочитать.

Tom Chung 28 нояб. 2013, в 15:50

0

когда я пытаюсь добавить код в htmlElement, он говорит, что он не определен, и тогда весь скрипт не работает. Здесь представлен весь скрипт в более читабельном формате. Часть, где я пробую то, что вы рекомендуете, находится в строке 28: gist.github.com/theirf/422f1c7e903b3074877b
gomangomango 28 нояб. 2013, в 17:55
0

Неважно, я нашел способ получить элемент. Но теперь он говорит, что .offsetWidth не определен. $('.notification').css('marginLeft', -$(this).offsetWidth/2); alert($('.notification').offsetWidth); Оповещения оповещения не определены.
gomangomango 28 нояб. 2013, в 18:10
0

В JQuery это должно быть $ (this) .outerWidth ()
Tom Chung 28 нояб. 2013, в 18:16
0

Это просто способ сделать это. Элемент означает объект HTMLElement. Не смущайтесь о них.
Tom Chung 28 нояб. 2013, в 18:17
0

Ох, ну ладно. Это имеет смысл. У меня все заработало, ну и ошибок нет. Но уведомление все еще перемещается по левому / левому краю и не отцентрировано по горизонтали. Вот мой код, ваше предложение в строке 58: gist.github.com/theirf/b7184fe8568a34a7b41d Вот страница: goo.gl/ZC8ZlN , код находится в jquery.notifications.js
gomangomango 28 нояб. 2013, в 18:56
0

Похоже, вы не правильно установили свойство css left. Вы уверены, что установите положение «фиксированный» или «абсолютный» и оставьте «50%»?
Tom Chung 29 нояб. 2013, в 05:08
0

да, я верю, что у меня есть. Но я разобрался с решением left:50%; и marginLeft:-50% of the width; Спасибо за помощь!
gomangomango 29 нояб. 2013, в 07:15

Показать ещё 5 комментариев

Jacob Cohen · Answer 2 · 2013-11-28T15-32-00.000Z

Если вы хотите работать с верхними, левыми, правыми, нижними атрибутами, вам нужно установить позицию элемента как относительную, так и абсолютную.

Я думаю, что в вашем случае вы можете использовать абсолютный. Возможно, вам также понадобится установить z-index.

Hive7 · Answer 3 · 2013-11-28T15-18-00.000Z

Вы можете поместить его в обертку, затем центрировать обертку, или вы можете центрировать ее с помощью ширины:

Упаковочный:

HTML:

<div class='wrapper'>
    <div class='fixed'>Hello</div>
</div>

CSS:

.wrapper {
    width: 500px;
    text-align: center;
    margin: 0 auto;
}
.fixed {
    position: fixed;
}

Или:

HTML:

<div class='wrapper'>
    <div class='fixed'>Hello</div>
</div>

CSS:

.fixed {
    width: 500px;
    position: fixed;
    left: 50%;
    margin-left: -250px;
}

Когда я добавляю ваш первый вариант оболочки и стиля в оболочку, уведомление больше не отображается: jsfiddle.net/Q6TUr/2
Это потому, что по какой-то причине уведомление имеет style='display: none' @gomangomango
У тебя есть идеи, откуда это? Я не могу найти откуда?

Terry · Answer 4 · 2013-11-28T15-05-00.000Z

Вот один трюк, который я могу предложить вам использовать: полагаться на 2D-преобразование CSS. Он поддерживается примерно у 81% пользователей сети, поэтому стоит попробовать.

То, что этот трюк делает, что он все еще устанавливает сообщение уведомления 50% по ширине страницы (что, конечно, визуально выключено). Затем мы подталкиваем элемент обратно к истинному центру, переведя его на 50% от собственной расчетной ширины.

.notification-board.center{
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

http://jsfiddle.net/Q6TUr/1/