Subtract half the size of your inner element
listWidth = ($(this).find("a").width() /2) - 10 ; //<-- calculating width of each li
Pergunta
I am trying to horizontally center a dynamic element to dom level parents that have different widths.
I have most everything down but I am just calculating it wrong. Any help would be greatly appreciated.
NOTE: The width of the item I need centered is 20px
Script
$(function() {
$(".nav-menu").children("li").each(function() {
$(this).on( "mouseenter", function(){
listWidth = $(this).find("a").width() /2 ; //<-- calculating width of each li
$(this).find(".sub").prepend('<li id="nav-hover-state"></li>');
$(this).find("#nav-hover-state").attr('style', 'margin-left:'+listWidth +'px');
});
$(this).on( "mouseleave", function(){
if($('.nav-container ul.nav-menu li .sub').attr('style','display:none')) {
$(this).find("#nav-hover-state").remove();
}
});
});
Solução
Subtract half the size of your inner element
listWidth = ($(this).find("a").width() /2) - 10 ; //<-- calculating width of each li