Javascript 选中时使图元浮动到div的中心

我有几个选项卡，它们有水平滚动。当我选择一个时，我希望它们居中

<div class="days">
  <span ng-click="changeTab(1)"  ng-class="{ 'active-tab': activeTab == 1 }">Monday</span>
  <span ng-click="changeTab(2)"  ng-class="{ 'active-tab': activeTab == 2 }">Tuesday</span>
  <span ng-click="changeTab(3)"  ng-class="{ 'active-tab': activeTab == 3 }">Wednesday</span>
  <span ng-click="changeTab(4)"  ng-class="{ 'active-tab': activeTab == 4 }">Thursday</span>
  <span ng-click="changeTab(5)"  ng-class="{ 'active-tab': activeTab == 5 }">Friday</span>
</div>

---

从这个线程：

给每个span标记一个ID和一个onclick事件

<span ng-click="changeTab(1)"  ng-class="{ 'active-tab': activeTab == 1 }" 
id="demo" onclick="myFunction()">Monday</span>

}

---

这将在没有动画的情况下移动，但可以使用setInterval添加动画。

为每个span标记指定一个ID和一个onclick事件

<span ng-click="changeTab(1)"  ng-class="{ 'active-tab': activeTab == 1 }" 
id="demo" onclick="myFunction()">Monday</span>

}

---

这将在没有动画的情况下移动，但可以使用setInterval添加动画。

您可以添加您已经尝试过的代码示例吗？@nilschlüter edited您可以添加您已经尝试过的代码示例吗？@nilschlüter editedHm似乎不起作用。我是否必须为每个元素添加id，或者我可以动态添加id，因为有多个元素？Hm似乎不起作用。我是否必须向每个元素添加id，或者我可以以某种方式动态添加id，因为有多个元素？

var x_pos;
var y_pos;
var div;

function myFunction() {
x_pos = window.innerWidth/2;
y_pos = window.innerHeight/2;
div = document.getElementById("demo")

div.style.position = "absolute";
div.style.left = x_pos+'px';
div.style.top = y_pos+'px';