使用帶'resize'事件的.outerWidth（）＆.outerHeight（）將父元素中的子元素居中。

Question

我正在嘗試編寫一些JavaScript代碼，該代碼將允許我使用填充將父元素集中到其父元素中。然後使用相同的函數使用'resize'事件重新計算間距。在你開始問我爲什麼不用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(); 

爲例Ë - link

Answer 1

儘管我完全不同意這種橫向居中元素的方法，但希望這可以幫助你。

小提琴：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; } 

從爲什麼我這個Appro公司不同意進一步推進上ach - 不應該使用JavaScript來描述事情。當然 - 它可以是，如果它確實需要使用;但是對於像元素居中這樣簡單的事情來說，它根本就沒有必要。瀏覽器自己處理調整CSS元素的大小，所以通過使用JS，你可以爲自己進一步引入更多麻煩。

這裏有一對夫婦的如何，你只能在CSS實現這一點的例子：

的text-align：中心&顯示：inline-block的https://jsfiddle.net/0uxx2ujg/1/

位置：絕對&左：50％https://jsfiddle.net/0uxx2ujg/2/（此也可以用於垂直居中也比水平更復雜）

Answer 2

您可以創建新的CSS類元素的大小調整上$ window.onresize =函數（）{// 添加代碼 };