离子:如何使div居中？

Question

情况:

我正在使用Ionic框架制作应用程序.在一个页面中,我需要显示图像.此图像必须水平居中.

ATTEMPT 1:

在文档之后,我将一行划分为三个相等的列,并将图像放在第二行中.

 <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>

但不幸的是,图像远未集中.倾向于留在屏幕的左半部分.

ATTEMPT 2:

尝试一些旧的CSS技巧.

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

但同样,我没有得到理想的结果.

问题:

我怎样才能在离子框架中居中？

Answer 1

你已经找到了答案,但我会这样做:

在你的CSS中:

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

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

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

这样您就不需要自己调整每个图像了,当您查看HTML时我发现它非常具有描述性.而且,它不限于特定的图像尺寸.

Answer 2

在离子框架2,你现在可以使用属性的指令 center,并text-center为.

<ion-row>
  <ion-col text-center>
    <a href="#">My centered text</a>
  </ion-col>
</ion-row>

Answer 3

如果添加width样式,则第二次尝试有效.宽度应该是图像的宽度.

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