html - ionic : How to center a div?

Question

情况:

我正在使用 Ionic framework 制作应用程序.在一页中我需要显示图像。此图像必须水平居中。

尝试 1:

在 documentation 之后我将一行分成三等分的列，并将图像放在第二列中。

 <div class="row">
    <div class="col col-33"></div>
    <div class="col col-33">
        <img src="{{ data.logo }}" alt="">
    </div>
    <div class="col col-33"></div>
 </div>

但不幸的是图像远未居中。倾向于停留在屏幕的左半部分。

尝试 2:

尝试一些旧的 css 技巧。

<div style="margin: 0 auto;">
    <img src=" {{ data.logo }} " alt="" >
</div>

但我还是没有得到想要的结果。

问题:

如何在 Ionic 框架中将 div 居中？

Answer 1

你已经找到了你的答案，但我会做类似的事情:

在你的 CSS 中:

.center {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

然后只需将此类添加到您的图像中:

 <img src="{{ data.logo }}" class="center" alt="">

这样您就不需要单独调整每个图像，当您查看 HTML 时，我发现这非常具有描述性。此外，它不限于特定的图像尺寸。