时间戳

首页 > 解决方案 > 在中心 CSS 中对齐单个列表项

html - 在中心 CSS 中对齐单个列表项

问题描述

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

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

我想要实现的是：当一个列表项被选中时，将选中的列表项居中对齐。我添加了一张专业图片以进行澄清。此更改稍后将被动画化以实现平滑过渡，就像轮播一样。

所选项目出现在中间行

以下是<ul>标签的css。

ul {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}

我试过的是align-self: center在其中一个<li>项目上使用，但没有运气。

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

谢谢你！

标签： htmlcssreactjsflexbox

解决方案

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

例子：

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

如果您的列表是动态的，关于列表长度和项目宽度，您可以使用Element.getBoundingClientRect()来查找元素的尺寸，并使用与上述相同的计算。

代码笔： https ://codepen.io/anon/pen/vjJMVL

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>

CSS：

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)  
}

推荐阅读