Использование .outerWidth() & .outerHeight() с событием 'resize' для центрирования дочернего элемента в родительском

Question

Я пытаюсь написать код JavaScript, который позволит мне центрировать дочерний элемент внутри его родителя с помощью дополнения. Затем, используя ту же функцию, чтобы пересчитать интервал, используя событие «изменить размер». Прежде чем вы начнете спрашивать меня, почему я не делаю этого с помощью CSS, этот код является лишь небольшой частью более крупного проекта. Я упростил код, так как остальная часть кода работает и будет только путать тему.

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

($outer.outerWidth() - $inner.outerWidth())/2; 
($outer.outerHeight() - $inner.outerHeight())/2; 

Проблема

Хотя я успешно удалось получить желаемых результатов с запасом. Простуда вызывает у меня проблемы.

1. Это, как представляется, увеличение ширины на внешнем элементе при изменении размеров
2. Это не центрировать дочерний элемент идеально (как представляется, смещение)
3. Внутренний элемент падает на изменении размеров и становится невидимым ,

Я понимаю, что могут быть некоторые основы в отношении заполнения, которые вызывают мои проблемы, однако после многочисленных журналов консоли и наблюдения за возвращаемыми данными я все еще не могу погладить проблему. Любое предложение было бы очень желанным. Может оказаться, что это вообще невозможно.

HTML

<div id="demo" class="outer"> 
    <div class="inner"> 

    </div> 
</div> 

CSS

html { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
} 

.outer { 
    width:97%; 
    height:400px; 
    border:1px solid black; 
    margin:20px; 
} 

.inner { 
    width:40%; 
    height:100px; 
    background-color:grey; 
} 

JAVASCRIPT

var $outer = $(".outer"); 
var $inner = $(".inner"); 

var getSpace = function(axis) { 

    if (axis.toLowerCase() == "x") { 

    return ($outer.outerWidth() - $inner.outerWidth())/2; 

    } else if (axis.toLowerCase() == "y") { 

    return ($outer.outerHeight() - $inner.outerHeight())/2; 

    } 

} 

var renderStyle = function(spacingType) { 

    var lateralSpace = getSpace("x"); 
    var verticalSpace = getSpace("y"); 

    var $element; 

    if (spacingType == "padding") { 
     $element = $outer; 
    } else if (spacingType == "margin") { 
     $element = $inner; 
    } 

    $.each(["top", "right", "bottom", "left"], function(index, direction) { 
    if (direction == "top" || direction == "bottom") { 
     $element.css(spacingType + "-" + direction, verticalSpace); 
    } 
    else if (direction == "right" || direction == "left") { 
     $element.css(spacingType + "-" + direction, lateralSpace); 
    }          
    });     
}; 

var renderInit = function() { 

    $(document).ready(function() { 

    renderStyle("padding"); 

    }); 

    $(window).on("resize", function() { 

    renderStyle("padding"); 

    }); 

} 

renderInit(); 

EXAMPL E - link

Answer 1

Хотя я полностью не согласен с этим подходом к горизонтальному центрированию элемента, надеюсь, это поможет вам на вашем пути.

Fiddle: https://jsfiddle.net/0uxx2ujg/

JavaScript:

var outer = $('.outer'), inner = $('.inner'); 
function centreThatDiv(){ 
    var requiredPadding = outer.outerWidth()/2 - (inner.outerWidth()/2); 
    console.log(requiredPadding); 
    outer.css('padding', '0 ' + requiredPadding + 'px').css('width','auto'); 
} 

$(document).ready(function(){ 
    // fire on page load 
    centreThatDiv(); 
}); 

$(window).resize(function(){ 
    // fire on window resize 
    centreThatDiv(); 
}); 

HTML:

<div class="outer"> 
    <div class="inner">Centre me!</div> 
</div> 

CSS:

.outer{ width:80%; height:300px; margin:10%; background: tomato; } 
.inner{ width:60px; height:60px; background:white; } 

продвинул на от того, почему я не согласен с этим соответствую ach - JavaScript не должен использоваться для прокладки. Конечно - может быть, если это действительно необходимо использовать; но для чего-то простого, как центрирование элемента, это совсем не обязательно. Браузеры обрабатывают изменения самих элементов CSS, поэтому, используя JS, вы вводите больше головных болей для себя дальше по линии.

Вот несколько примеров того, как можно достичь этого в CSS только:

выравнивания текста: центр & дисплей: встроенный блок https://jsfiddle.net/0uxx2ujg/1/

позицию: абсолютная & слева: 50% https://jsfiddle.net/0uxx2ujg/2/ (это может использоваться и для вертикального центрирования, который более сложный, чем горизонтальный).

Answer 2

Вы можете создать новый класс CSS для корректировки размера элементов на $ window.onresize = функция() {// добавить код };