如何将卡片置于语义中心？

Question

我已经为卡片实现了owl滑块，我试图将其模拟为移动设备，看起来卡片没有正确居中。

我已尝试过所有UI网格和其他中心课程，但他们没有工作。

这是我的HTML

<div class="owl-carousel">

    <div class="ui card">
        <div class="image dimmable">
            <div class="ui blurring inverted dimmer transition hidden">
                <div class="content">
                    <div class="center">
                       <div class="ui teal button">Ver más sobre Circulo K</div>
                    </div>
                </div>
            </div>
            <img src="../assets/images/stores/circulok.jpg">
        </div>

        <div class="content">
            <div class="header">Circulo K</div>
                <div class="meta">
                    <a class="group">Meta</a>
                </div>
                <div class="description">Descripción Corta</div>
            </div>

            <div class="extra content">
                <a class="right floated created">Arbitrary</a>
                <a class="friends"></a>
            </div>
        </div>

   </div>
</div>

我是怎么做到的？

Answer 1

使用居中类。

<div class="ui centered card"><br> <!-- HERE -->
<div class="image">
    <img src="/path/to/image/"><br>
  </div>
  <div class="content">
    <a class="header">Link</a><br>
  </div>
</div>

Answer 2

使用诸如ui网格居中或ui容器中心对齐的类

例如：

<div class="ui container center aligned">
  <div class="ui segment">Hello Center</div>
</div>