Ionic：如何使 div 居中？

Posted 2023-02-19

【中文标题】Ionic：如何使 div 居中？

【英文标题】：Ionic: How to center a div?

【发布时间】：2015-09-12 02:07:31

【问题描述】：

情况：

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

尝试 1：

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

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

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

尝试 2：

尝试一些旧的 css 技巧。

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

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

问题：

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

【问题讨论】：

<center></center> 为我工作。不要在 html 标准中不推荐使用它

<center> 已过时，在 HTML5 中不受支持。长期以来，强烈建议不要在 HTML 等结构化文档中使用样式标签。 developer.mozilla.org/en-US/docs/Web/HTML/Element/center

【参考方案1】：

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

在你的 CSS 中：

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

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

 <img src=" data.logo " class="center" >

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

【参考方案2】：

在Ionic Framework 2 中，您现在可以为此使用attribute directives center 和text-center。

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

【参考方案3】：

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

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

【讨论】：

好的，需要一些额外的工作来获得每个图像的宽度，但看起来工作正常。离子网格系统没有考虑奇怪吗？

【参考方案4】：

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

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

【讨论】：

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

【参考方案5】：

简单：

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

【参考方案6】：

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

除了margin 0 auto 之外，还要提供适当的宽度，以便您的 div 可以找到它的中心位置。