css - 如何在 semantic-ui 中将卡片居中？

Question

我已经为卡片实现了猫头鹰 slider ，我试图模拟为移动设备，看起来卡片没有正确居中。

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