使用“align：center”和“margin：0 auto”将元素居中在CSS中有什么区别？ [英] What is the difference between using `align:center` and `margin: 0 auto` to center an element in CSS?

问题描述

我已经读过很多地方使用 margin：0 auto 中心元素（例如div）。

但为什么不使用 align：center ？

使用 margin 工作的比对也会更加自然垂直吗？

解决方案

首先，没有align：center。你正在想的是text-align：center，那个细节前缀text-—是一个提示，什么问题是。 text-align属性用于在块中布置的内联元素。当您尝试将某个内容中的块级元素置中时，内联布局样式就没有意义了。

（现在已弃用）元素上的align属性不是CSS的东西;

现在，对于垂直对齐，遗憾的是答案是不，至少在实际中术语。 margin：auto的诀窍将无法工作。垂直对齐，没有什么，但CSS是具有挑战性，轻轻地。有许多不同的情况和技术要使用。这是一个有趣的（如果一个老的）主题的页面： http： //www.student.oulu.fi/~laurirai/www/css/middle/

从未来编辑&mdash ;任何试图进行垂直居中的人都应该关注 flexbox布局。

I have read in a lot of places to center elements (a div for example) using margin:0 auto.
but why not use align:center? I think it seems more natural to use the later.

Also will the alignment using margin work vertically too?

解决方案

First, there is no "align: center". What you're thinking of is "text-align: center", and that detail — the prefix "text-" — is a hint as to what the problem is. The "text-align" property is for inline elements being laid out in blocks. When you're trying to center a block-level element in some content, an inline layout style does not make sense.

The (now deprecated) align attribute on elements is not a CSS thing; it's a throwback to the days of yesteryear.

Now, as to vertical alignment, sadly the answer is "no," at least in practical terms. The trick with "margin: auto" won't work. Vertical alignment with nothing but CSS is challenging, to put it mildly. There are many different situations and techniques to use. Here's an interesting (if a little old) page on the subject: http://www.student.oulu.fi/~laurirai/www/css/middle/

edit from the future — Anybody trying to do vertical centering should be keeping an eye on the availability of flexbox layout.

这篇关于使用“align：center”和“margin：0 auto”将元素居中在CSS中有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！