离子:如何把一个div中心?

THE SITUATION:

这句话的语境是:

I am making an app using Ionic framework. In one page i need to display an image. This image has to be horizontally centered.

我正在用Ionic framework做一个应用。在一个页面中，我需要显示一个图像。这个图像必须是水平居中的。

ATTEMPT 1:

尝试1:

Following the documentation i have divided one row into three equal columns and put the image in the second one.

根据文档，我将一行分为三列，并将图像放在第二列。

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

But unfortunately the image is far to be centered. Tend to stay in the left half of the screen.

但不幸的是，这幅图像远没有居中。倾向于保持在屏幕的左半部分。

ATTEMPT 2:

尝试2:

Trying with some old css tricks.

尝试一些旧的css技巧。

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

But again i am not getting the desired result.

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

THE QUESTION:

一个问题:

How can i center a div in Ionic framework?

我如何在Ionic框架中中心一个div ?

5 个解决方案

#1

In Ionic Framework 2 you could now use the attribute directives center and text-center for that.

在Ionic Framework 2中，您现在可以使用属性指令中心和文本中心。

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

#2

You already found your answer but I would do something like that instead:

你已经找到了你的答案，但我想这样做:

In your css:

在css:

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

And then just add this class to your image:

然后把这个类添加到你的图像中:

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

This way you don't need to adjust each image on its own and I find this very descriptive when you look at the HTML. Also, it is not restricted to a specific image size.

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

#3

Your 2nd attempt works if you add the width style. The width should be the width of the image.

如果你添加宽度样式，你的第二次尝试就会成功。宽度应该是图像的宽度。

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

#4

This should work, just add col-centerclass:

这应该可以，只要添加col-centerclass:

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

#5

To allign a div center, margin 0 auto is still the best option but for this you need to provide a proper space to the div to find the center section of it and therefore you need to provide it some with.

对于div中心来说，margin 0 auto仍然是最好的选择，但是为此，您需要为div提供适当的空间来找到它的中心部分，因此您需要为它提供一些。

Along with margin 0 auto also give a proper width so your div can find a center location of it.

除了空白0自动也给一个适当的宽度，以便你的div可以找到它的中心位置。

#1