позиционирования по отношению к центру элемента

у меня есть проблемы с позиционированием моего меню CSS - .dropdown внимания центра изображения - #logo, он должен иметь абсолютную позицию, я написал функцию, которая должна сделать это:позиционирования по отношению к центру элемента

$(function() { 
     var $logo = $('#logo'); 
     var marginRight = ($(window).width() - ($logo.offset().left + $logo.outerWidth())); 
     $('.dropdown').css('marginRight', marginRight); 
});

Он работает отлично в IE, но не всегда в Chrome и Firefox. Зачем? Это веб-сайт:

site during production

источник

2016-10-18 13atomas

позиционирования стайлинг и предпочтительно не должно быть сделано с JavaScript. –

@SvenvandeScheur Я имею в виду, вы правы, но есть причины для этого. Я думаю, мы все согласны, особенно когда речь заходит о Центрировании, что вы должны работать немного вне коробки. По какой-то причине проблема в том, что веб-стандарты просто не могут обеспечить достойное, простое решение. – zfrisch

9/10 Вы можете сделать это без js. Например, с помощью flexbox/margin и или transform: translate(). Unfortunatly. Мне непонятно, в чем цель. Без урезанной скрипки я ничего не могу порекомендовать. –

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

$('.dropdown').css('right', margright);

источник

2016-10-18 20:26:02

Это не помогло. Когда вы впервые открываете это (или после очистки кеша) в firefox, меню показывает слишком много справа, когда вы обновляете его, выглядит хорошо .. – 13atomas

Try обернуть код:

$('#logo').on('load', function() { 
    // you code here 
});

Потому что вы написали код внутри документа готовый обратного вызова, но изображение делает пока не загрузите и не знаете его размеров.

источник

2016-10-18 21:00:21

это не помогло, те же результаты в firefox ... – 13atomas

Вы не сказали, где именно вы хотите расположить ниспадающее меню, но если вы хотите, чтобы это было в середине под логотипом вы можете сделать это

$(function() { 
    var logo = $('#logo'); 

    logo.on('load', function() { 
     var left = logo.offset().left + logo.outerWidth()/2; 
     $('.dropdown').css('left', left); 
    }); 
});

источник

2016-10-18 21:18:03

Это не помогите, я хочу поставить раскрывающееся меню под правой стороной логотипа, когда я помещаю этот код в поведение Firefox, странно – 13atomas

@SvenvandeScheur, спасибо за внимание. Я нашел решение (код javascript отлично работает на странице), но было бы интересно, как это сделать с помощью flexbox. Я хочу, чтобы выпадающее меню поставить под нижним правым углом по центру изображения

https://jsfiddle.net/1ddk7e5k/

Этот код работает на странице:

$("#logo").load(function() { var margright=(($('.centered').width()-$('#logo').width())/2); $('.dropdown').css('marginRight',margright); });

источник

2016-10-20 14:42:11 13atomas

позиционирования по отношению к центру элемента

ответ

Смежные вопросы