Javascript將活動元素垂直居中

Question

我正在做的網站上有一個旋轉木馬，當項目處於活動狀態時，我需要實現一個使圖像垂直居中的功能，該功能是這樣的：

function vertically_centred(first_box_id, second_box_id){
    window.onresize = function() {
        var height1 = document.getElementById(first_box_id).offsetHeight;

        var height = document.getElementById(second_box_id).offsetHeight;

        var total = (height / 2 ) - (height1 / 2);

        var color = document.getElementById(first_box_id);
        color.style.top = total + "px";
    };

}

我有3個項目，里面有2個具有不同ID的框，該函數可以正常工作，但是當輪播更改為下一個項目時，該函數不起作用，我已通過在html文件中添加此函數來實現此函數：

<script>
    vertically_centred('text-1', 'item-1');
    vertically_centred('text-2', 'item-2');
    vertically_centred('text-3', 'item-3');
</script>

我認為它需要檢測項目是否處於活動狀態，然后使用該功能，但我不知道該怎么做。

HTML：

<div id="myCarousel" class="carousel">

    <ol class="carousel-indicators">
        <li class="active" data-target="#myCarousel" data-slide-to="0"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner">

        <div id="item-1" class="active item">

            <div class="container">
                <div id='text-1' class="text-center-resizable">
                    <img src="images/welcome_img.png" alt="Cover">
                    Welcome test1
                </div>
            </div>

        </div>

        <div id="item-2" class="item">

            <div class="container">
                <div id="text-2" class="text-center-resizable">
                    <img src="images/welcome_img.png" alt="Cover">
                    Welcome test2
                </div>
            </div>

        </div>

        <div id="item-3" class="item">

            <div class="container">
                <div id="text-3" class="text-center-resizable">
                    <img src="images/cover.jpg" alt="Cover">
                    Welcome test3
                </div>
            </div>

        </div>
    </div>


    <a href="#myCarousel    " class="left carousel-control" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span> </a>
    <a href="#myCarousel" class="right carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span> </a>
</div>

的CSS

/* This is for Big Screen the min size is 13px and the max when
    screen is bigger its 16px*/
@media (max-width: 1200px) {
    .text-center-resizable {
        font-size: 13px;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        padding-top: 20px;
        padding-bottom: 20px;
        color: #ffffff;
        text-align: center;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    }
}

@media (min-width: 1200px) {
    .text-center-resizable {
        font-size: 16px;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        padding-top: 20px;
        padding-bottom: 20px;
        color: #ffffff;
        text-align: center;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    }
} /* End of the class */
#myCarousel {
     background-color: #222;
     background-attachment: fixed;
     background-repeat: no-repeat;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     padding: 0;
 }

Answer 1

我解決了更改它以元素為中心的問題，如果將來有人需要它，我將直接保留代碼：

。

text-center-resizable {
        color: #ffffff;
        text-align: center;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }

Answer 2

每次調用vertical_centred時，它只是重置window.onresize函數。 因此，先前的值會丟失。 嘗試這樣的事情：

function vertically_centred(first_box_id, second_box_id){
    var height1 = document.getElementById(first_box_id).offsetHeight;
    var height = document.getElementById(second_box_id).offsetHeight;
    var total = (height / 2 ) - (height1 / 2);
    var color = document.getElementById(first_box_id);
    color.style.top = total + "px";
}

function centerItems(){
    vertically_centred('text-1', 'item-1');
    vertically_centred('text-2', 'item-2');
    vertically_centred('text-3', 'item-3');
}

然后，您的下一個和上一個按鈕可以定義為：

<a href="#myCarousel" onclick="centerItems()" class="left carousel-control" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span> </a>
<a href="#myCarousel" onclick="centerItems()" class="right carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span> </a>