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

Question

我已经实现了卡片的猫头鹰滑块,我试图模拟为移动设备,它看起来卡没有正确居中.

我已经尝试过所有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>