将li.active定位到它的父元素的中心，并移动其周围的剩余项目

Question

我有一个水平列表，我试图定位，以便li.active是父元素的中心。

＆＃13;

＆＃13;

div {
  display:block;
  width:100%;
  text-align:center;

}
ul {
  transform: translateX( calc(50% - (150px / 2) - (150px * 6)) );
  overflow:hidden;
  white-space:nowrap;
  direction:rtl;
}
li {
  display:inline-block;
  background:blue;
  height:300px;
  width:150px;

}
li.active {
  background:white;
  background:green;
}

span {
  display:block;
  width:150px;
  background: purple;
  height:150px;

  position:absolute;
  top:0;
  left: calc(50% - 75px);
}
* {
  font-size:0;
  padding:0;
  margin:0;
}

＆＃13;

<div>
  <ul>
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

<span></span>

＆＃13;

＆＃13;

＆＃13;

请注意，我会动态添加项目，因此我已将ul设置为direction:rtl;，因此在添加新项目时，它不会影响{{ 1}}定位。

在这个示例中：http://jsbin.com/fafedowaza/edit?html,css,output - 我将绿色块居中，这样它就会对紫色块进行重叠。

我怎么能实现这个目标？

Answer 1

1。变换：translateX

我将display的{​​{1}}属性更改为ul，因此它可以依赖于内容宽度而非父级宽度。此外，我注意到，当您编写inline-block语句时，将绿色块计数两次，将（150px * 6）更改为（150px * 5）。 此解决方案仅在窗口（或父级）宽度至少为900px（6 * 150px）时才有效。

calc

div {
  display: inline-block;
  display: block;
  width: 100%;
  text-align: center;
}
ul {
  transform: translateX( calc(50% - (150px / 2) - (150px * 5)));
  overflow: hidden;
  white-space: nowrap;
  direction: rtl;
  display: inline-block;
  overflow: hidden;
}
li {
  display: inline-block;
  background: blue;
  height: 300px;
  width: 150px;
}
li.active {
  background: green;
}
span {
  display: block;
  width: 150px;
  background: purple;
  height: 150px;
  position: absolute;
  top: 0;
  left: calc(50% - 75px);
}
* {
  font-size: 0;
  padding: 0;
  margin: 0;
}

2。位置：绝对

无论父母的宽度如何，这个都可以。我不确定为什么<div> <ul> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <span></span>以这种方式表现自己，没有多大用处，但看起来像transform: translateX就可以了。

position: absolute

div {
  display: block;
  width: 100%;
  position: relative;
}
ul {
  position: absolute;
  left: calc(50% - (150px / 2) - (150px * 5));
  white-space: nowrap;
  direction: rtl;
  display: inline-block;
}
li {
  display: inline-block;
  background: blue;
  height: 300px;
  width: 150px;
}
li.active {
  background: green;
}
span {
  display: block;
  width: 150px;
  background: purple;
  height: 150px;
  position: absolute;
  top: 0;
  left: calc(50% - 75px);
}
* {
  font-size: 0;
  padding: 0;
  margin: 0;
}

3。动态添加项目

当您说可以动态添加项目并且不会影响定位时，我不确定您的意思，因为您根据<div> <ul> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <span></span>元素的数量设置了calc语句。这样，当您添加li时，您应该更改li语句或至少将另一个css类添加到calc，这将覆盖旧规则。如果您计划通过JavaScript添加/删除ul元素，您可能会使用它来修复定位。如果您的项目列表在服务器端是动态的，您可以根据li元素的数量为ul设置一个css类。

Answer 2

有一种标准的中心元素方法，包括将left属性设置为50％，然后再将其翻译50％。

在您的情况下，此技术的变体很有用，但由于您使用的是rtl方向，因此可以将其更改为使用正确的属性：

已添加

  position: absolute;
  right: 50%;
  transform: translateX(75px);

到ul

＆＃13;

＆＃13;

div {
  display:block;
  width:100%;
  text-align:center;

}
ul {
  overflow:hidden;
  white-space:nowrap;
  direction:rtl;
  /* new style */
  position: absolute;
  right: 50%;
  transform: translateX(75px);
}
li {
  display:inline-block;
  background:blue;
  height:300px;
  width:150px;

}
li.active {
  background:white;
  background:green;
}

span {
  display:block;
  width:150px;
  background: purple;
  height:150px;

  position:absolute;
  top:0;
  left: calc(50% - 75px);
}
* {
  font-size:0;
  padding:0;
  margin:0;
}

＆＃13;

<div>
  <ul>
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

<span></span>

＆＃13;

＆＃13;

＆＃13;