Semantic-UI 卡片文本对齐变化

在 Semantic-UI 中，卡片（Card）是一个常用的组件。在卡片中，我们经常需要对不同的文本元素进行对齐。下面介绍如何在 Semantic-UI 中实现卡片文本的对齐变化。

靠左对齐

默认情况下，卡片中的文本是左对齐的。如果需要显示特定的文本靠左对齐，我们可以使用 left aligned 类。

<div class="ui card">
    <div class="content">
        <div class="header left aligned">Title</div>
        <div class="meta left aligned">Meta</div>
        <div class="description left aligned">Description</div>
    </div>
</div>

居中对齐

有时候，我们需要将卡片中的文本居中对齐。可以使用 center aligned 类。

<div class="ui card">
    <div class="content">
        <div class="header center aligned">Title</div>
        <div class="meta center aligned">Meta</div>
        <div class="description center aligned">Description</div>
    </div>
</div>

靠右对齐

如果需要将卡片中的文本靠右对齐，则可以使用 right aligned 类。

<div class="ui card">
    <div class="content">
        <div class="header right aligned">Title</div>
        <div class="meta right aligned">Meta</div>
        <div class="description right aligned">Description</div>
    </div>
</div>

混合使用

如果需要将不同的文本元素使用不同的对齐方式，可以分别使用上面提到的类。

<div class="ui card">
    <div class="content">
        <div class="header left aligned">Title</div>
        <div class="meta center aligned">Meta</div>
        <div class="description right aligned">Description</div>
    </div>
</div>

总之，我们可以使用上述方法对卡片中的文本实现不同的对齐效果，使得卡片更加美观易读。