Semantic-UI 列表垂直对齐的内容变化

在 Semantic-UI 中，列表元素允许我们垂直对齐内容。通过使用特定的类标记和CSS样式，我们可以轻松地实现这个效果。

使用语法

语法如下所示：

<div class="ui list">
  <div class="item">
    <div class="content">
      <div class="header">标题1</div>
      <div class="description">描述1</div>
    </div>
  </div>
  <div class="item">
    <div class="content">
      <div class="header">标题2</div>
      <div class="description">描述2</div>
    </div>
  </div>
  ...
</div>

在上面的示例中，我们使用 <div class="ui list"> 来创建一个列表，每个列表项都包含在 <div class="item"> 中。内容位于 <div class="content"> 中，包括一个标题和一个描述。

垂直对齐的CSS样式类

Semantic-UI 提供了一些CSS样式类，用于控制列表项的垂直对齐方式。这些类可以应用于上述示例中的 <div class="content"> 元素。

• aligned: 将内容与左侧对齐。
• middle aligned: 将内容垂直居中对齐。
• top aligned: 将内容与顶部对齐。
• bottom aligned: 将内容与底部对齐。

<div class="ui list">
  <div class="item">
    <div class="content aligned">
      <div class="header">标题1</div>
      <div class="description">描述1</div>
    </div>
  </div>
  <div class="item">
    <div class="content middle aligned">
      <div class="header">标题2</div>
      <div class="description">描述2</div>
    </div>
  </div>
  <div class="item">
    <div class="content top aligned">
      <div class="header">标题3</div>
      <div class="description">描述3</div>
    </div>
  </div>
  <div class="item">
    <div class="content bottom aligned">
      <div class="header">标题4</div>
      <div class="description">描述4</div>
    </div>
  </div>
</div>

响应式对齐

Semantic-UI 还支持根据屏幕大小自动调整对齐方式。通过在上述CSS类后面添加 -only <size> 即可。

常用的响应式大小包括：

• tablet: 平板电脑大小
• mobile: 移动设备大小

<div class="ui list">
  <div class="item">
    <div class="content aligned tablet only">
      <div class="header">标题1</div>
      <div class="description">描述1</div>
    </div>
  </div>
  <div class="item">
    <div class="content middle aligned">
      <div class="header">标题2</div>
      <div class="description">描述2</div>
    </div>
  </div>
  <div class="item">
    <div class="content aligned mobile only">
      <div class="header">标题3</div>
      <div class="description">描述3</div>
    </div>
  </div>
</div>

以上示例中，标题1和描述3仅在相应的设备上显示，并具有与其他内容不同的对齐方式。

以上就是使用 Semantic-UI 实现列表垂直对齐的内容变化的介绍。通过使用不同的CSS样式类，我们可以轻松地控制列表项的垂直对齐方式，并在不同的设备上进行响应式调整。在你的项目中尝试一下吧！