Javascript垂直居中于活动元素

我正在做的网站中有一个旋转木马，我需要实现一个功能，当项目处于活动状态时，将图像垂直居中，功能如下：

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，该功能工作得很好，但是当carousel更改为下一个项目时，该功能不起作用。我通过在html文件中添加以下内容实现了该功能：

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

---

每次调用垂直调整中心时，它只是重置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>

---

我解决了更改元素中心位置的问题，如果将来有人需要，我将保留代码：

---

你能发布html标记吗？你试过color.style.position='absolute'吗；？我已经添加了html文件，该函数适用于第一个项目，但是当项目更改时，它就不起作用了。这不是css的问题，但是在脚本上，当它改变idk时，它不工作，为什么你仍然需要添加css供我们测试和跟踪。@Ryan问题不在css上，因为函数工作正常，问题是要检测哪个项目处于活动状态，以便它只能在该项目上工作。如果您向我们展示您的代码，包括HTML和您使用的库，我们将能够建议更好的方法。对于这种需求，您不需要使用JS。这是可行的，但不是我需要的方式，因为当项目更改时，它不会调整图像的大小或垂直居中，只有在调整窗口大小时，它才会起作用。为什么您的示例中有关于调整窗口大小的代码？无论如何，我更改了代码，以便在单击“下一步”和“上一步”时可以调用它。它解决了部分难题，请记住，它将自动更改，因此不会执行任何单击操作。那怎么办？如果是的话，我将非常感谢你的回答。谢谢您是否使用第三方库进行此旋转木马？自动更改它的过程是什么？不管是什么，你都需要参与到这件事中去。

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>

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