Html 离子：如何使div居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31050832/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ionic: How to center a div?
提问by FrancescoMussi
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 框架制作一个应用程序。在一页中，我需要显示图像。此图像必须水平居中。
ATTEMPT 1:
尝试 1：
Following the documentationi 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 居中？
采纳答案by 0x1ad2
In Ionic Framework 2you could now use the attribute directivescenterand text-centerfor that.
在离子框架2，你现在可以使用属性的指令center，并text-center为。
<ion-row>
<ion-col text-center>
<a href="#">My centered text</a>
</ion-col>
</ion-row>
回答by Avi
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 时，我发现这非常具有描述性。此外，它不限于特定的图像大小。
回答by Michael
Your 2nd attempt works if you add the widthstyle. The width should be the width of the image.
如果添加width样式，则第二次尝试有效。宽度应该是图像的宽度。
<div style="margin: 0 auto; width:100px">
<img src=" {{ data.logo }} " alt="" >
</div>
回答by michelem
This should work, just add col-centerclass:
这应该有效，只需添加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>
回答by jalaj sharma
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 autoalso give a proper width so your div can find a center location of it.
随着margin 0 auto也给出了适当的宽度，使你的DIV可以找到它的中心位置。
回答by Khurshid Ansari
Simple:
简单的：
<div align="center">
<img style="height:100px;width:100px" src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" />
</div>