Ionic：如何使div居中？

Question

情况：

我正在使用Ionic框架制作一个应用程序。 在一个页面中，我需要显示一张图片。 这张图片必须水平居中。

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

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

尝试二：

尝试使用一些旧的 CSS 技巧。

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

但我仍未得到期望的结果。

问题：

如何在Ionic框架中居中一个div？

- FrancescoMussi

---

<center></center> 对我有效。不知道它在 HTML 标准中是否已被弃用。 - Dev

<center> 标签已经过时并且在 HTML5 中不再被支持。长期以来，强烈建议不要在结构化文档（如 HTML）中使用样式标签。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center - gelliott181

Answer 1

你已经找到了答案，但我会这样做：

在你的CSS中：

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

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

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

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

- Avi

Answer 2

在Ionic Framework 2中，您现在可以使用属性指令center和text-center实现该功能。Ionic Framework 2 属性指令。

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

- 0x1ad2

Answer 3

如果您添加width样式，第二次尝试将有效。宽度应该是图片的宽度。

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

- Michael

---

好的，需要一些额外的工作来获取每个图像的宽度，但似乎正常工作。奇怪的是在Ionic网格系统中没有考虑到吗？ - FrancescoMussi

Answer 4

这应该可以运行，只需添加 col-center 类：

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

- michelem

---

"col-center" 用于垂直居中。 - wassimans

Answer 5

简单：

<div align="center">
    <img style="height:100px;width:100px" src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" />
</div>

- Khurshid Ansari

Answer 6

为了让一个 div 居中对齐，margin 0 auto 仍然是最好的选项，但是你需要为该 div 提供适当的空间来找到其中心位置。因此，你需要为其提供一些宽度。

除了 margin 0 auto，还应该给该 div 提供一个适当的宽度，这样它才能找到居中位置。

- jalaj sharma