Html 在中心CSS中对齐单个列表项

我正在Reactjs中创建一个包含四个元素的导航栏。这些项目是一个简单的无序列表，一些css使用flexbox将它们水平对齐

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
<ul/>

我尝试在一个

项目上使用

对齐自：居中
，但运气不佳

有没有人做过类似的事情？我对所有类型的解决方案都持开放态度，即使是那些不使用flexbox的解决方案

谢谢大家!
 因为我没有完全得到你想要的，这是我能想到的最好的方法，将绝对定位应用于所选的一个，并用z-index将其与其他的重叠


document.querySelectorAll（'li'）.forEach（函数（li）{
li.addEventListener（'click'，函数（e）{
document.querySelectorAll（'li'）.forEach（函数（obj）{
obj.classList.remove（'selected'）；
});
e、 target.classList.add（“选定”）；
});
});
ul{
列表样式类型：无；
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
证明内容：中心；
}
李{
边框：1px实心；
填充：10px；
光标：指针；
位置：相对位置；
过渡：所有1秒；
利润率：0.20px；
}
.选定{
转换：比例（2.1）；
背景：白色；
盒影：0px 0px 55px黑色；
位置：绝对位置；
z指数：5；
}

一个
两个
三
四
由于我没有完全得到您想要的，这是我能想到的最好的方法，将绝对定位应用于所选的一个，并使其与其他z索引重叠


document.querySelectorAll（'li'）.forEach（函数（li）{
li.addEventListener（'click'，函数（e）{
document.querySelectorAll（'li'）.forEach（函数（obj）{
obj.classList.remove（'selected'）；
});
e、 target.classList.add（“选定”）；
});
});
ul{
列表样式类型：无；
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
证明内容：中心；
}
李{
边框：1px实心；
填充：10px；
光标：指针；
位置：相对位置；
过渡：所有1秒；
利润率：0.20px；
}
.选定{
转换：比例（2.1）；
背景：白色；
盒影：0px 0px 55px黑色；
位置：绝对位置；
z指数：5；
}

一个
两个
三
四
列表元素是否有固定格式，您知道有多少项吗？如果是这样，您可以计算列表的中心、项目偏移量，并添加CSS转换

示例：

<ul class="selected-2">
  <li>1</li>
  <li class="selected">2</li>
  <li>3</li>
  <li>4</li>
</ul>

<ul class="selected-4">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li class="selected">4</li>
</ul>

ul {
  display: flex;
  justify-content: center;
  list-style: none;
}

li {
  width: 80px;
  height: 80px;
  background-color: #eee;
  margin: 10px;
}

.selected {
  background-color: #ccc;
}

.selected-2 {
  transform: translateX(50px)  
}

.selected-4 {
  transform: translateX(-150px)  
}


您有一个包含四项的列表
每个项目的宽度等于100px
因此，列表的总宽度为400px
列表的中心点是从左边开始的200px
第二项的中心点是从左侧开始的150px。因此，我们必须从左边移动列表200px-150px=50px
第四项的中心点是从左起350像素。因此，我们必须从左侧移动列表200px-350px=-150px

如果列表在列表长度和项目宽度方面都是动态的，则可以使用查找元素的尺寸，并使用与上述相同的计算

Codepen:

HTML:

<ul class="selected-2">
  <li>1</li>
  <li class="selected">2</li>
  <li>3</li>
  <li>4</li>
</ul>

<ul class="selected-4">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li class="selected">4</li>
</ul>

ul {
  display: flex;
  justify-content: center;
  list-style: none;
}

li {
  width: 80px;
  height: 80px;
  background-color: #eee;
  margin: 10px;
}

.selected {
  background-color: #ccc;
}

.selected-2 {
  transform: translateX(50px)  
}

.selected-4 {
  transform: translateX(-150px)  
}

列表元素是否有固定的with，您知道有多少项吗？如果是这样，您可以计算列表的中心、项目偏移量，并添加CSS转换

示例：

<ul class="selected-2">
  <li>1</li>
  <li class="selected">2</li>
  <li>3</li>
  <li>4</li>
</ul>

<ul class="selected-4">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li class="selected">4</li>
</ul>

ul {
  display: flex;
  justify-content: center;
  list-style: none;
}

li {
  width: 80px;
  height: 80px;
  background-color: #eee;
  margin: 10px;
}

.selected {
  background-color: #ccc;
}

.selected-2 {
  transform: translateX(50px)  
}

.selected-4 {
  transform: translateX(-150px)  
}


您有一个包含四项的列表
每个项目的宽度等于100px
因此，列表的总宽度为400px
列表的中心点是从左边开始的200px
第二项的中心点是从左侧开始的150px。因此，我们必须从左边移动列表200px-150px=50px
第四项的中心点是从左起350像素。因此，我们必须从左侧移动列表200px-350px=-150px

如果列表在列表长度和项目宽度方面都是动态的，则可以使用查找元素的尺寸，并使用与上述相同的计算

Codepen:

HTML:

<ul class="selected-2">
  <li>1</li>
  <li class="selected">2</li>
  <li>3</li>
  <li>4</li>
</ul>

<ul class="selected-4">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li class="selected">4</li>
</ul>

ul {
  display: flex;
  justify-content: center;
  list-style: none;
}

li {
  width: 80px;
  height: 80px;
  background-color: #eee;
  margin: 10px;
}

.selected {
  background-color: #ccc;
}

.selected-2 {
  transform: translateX(50px)  
}

.selected-4 {
  transform: translateX(-150px)  
}

通过使用计算单击的
中心，以获取其
左侧
、宽度
，并将其传递给父级（
）。在父级中，使用
s ref获得
左侧的
和
元素的宽度。getBoundingClientRect（）
。计算
moveTo
状态，并相应地更新
s样式
transform:translateX（）
：


const{Component}=React；
常量项=[“一”、“二”、“三”、“四”]；
类MenuItem扩展组件{
clickHandler=（e）=>{
const{left，width}=e.target.getBoundingClientRect（）；
const itemCenter=左+宽/2；
this.props.updateCenter（itemCenter）；
}
render（）{
const{children}=this.props；
返回(
{children}
);
}
}
类菜单扩展组件{
状态={
移动到：0
};
updateCenter=（项目中心）=>{
const{left，width}=this.ul.getBoundingClientRect（）；
//this.ul.style.transform=`translateX（${center}px）`；
此.setState（（）=>({
移动到：左+宽/2-项目中心
}));
};
render（）{
const{items}=this.props；
const{moveTo}=this.state；
返回(
this.ul=ul}样式={{
转换：`translateX（${moveTo}px）`
}}>
{
items.map（（文本）=>(
{text}
))
}

);
}
}
ReactDOM.render(
,
演示
);
/**仅演示-显示中心**/
身体：：之前{
位置：绝对位置；
左：50%；
高度：100vh；
右边框：1px纯黑；