Html 对齐 div 内的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/684634/
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
Align contents inside a div
提问by Hemanshu Bhojak
I use css style text-align to align contents inside a container in HTML. This works fine while the content is text or the browser is IE. But otherwise it does not work.
我使用 css 样式 text-align 来对齐 HTML 容器内的内容。当内容是文本或浏览器是 IE 时，这可以正常工作。但否则它不起作用。
Also as the name suggests it is used basically to align text. The align property has been deprecated long back.
顾名思义，它主要用于对齐文本。align 属性很久以前就被弃用了。
Is there any other way to align contents in html?
有没有其他方法可以对齐html中的内容？
回答by bobince
text-align aligns text and other inline content. It doesn't align block element children.
text-align 对齐文本和其他内联内容。它不会对齐块元素子元素。
To do that, you want to give the element you want aligned a width, with ‘auto' left and right margins. This is the standards-compliant way that works everywhere except IE5.x.
为此，您需要为要对齐的元素指定一个宽度，并带有“自动”左右边距。这是除 IE5.x 之外的任何地方都适用的符合标准的方式。
<div style="width: 50%; margin: 0 auto;">Hello</div>
For this to work in IE6, you need to make sure Standards Modeis on by using a suitable DOCTYPE.
要使其在 IE6 中工作，您需要使用合适的 DOCTYPE确保标准模式处于开启状态。
If you really need to support IE5/Quirks Mode, which these days you shouldn't really, it is possible to combine the two different approaches to centering:
如果你真的需要支持 IE5/Quirks 模式，但现在你真的不应该支持，可以结合两种不同的居中方法：
<div style="text-align: center">
<div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>
(Obviously, styles are best put inside a stylesheet, but the inline version is illustrative.)
（显然，样式最好放在样式表中，但内联版本是说明性的。）
回答by Mahdi
You can do it like this also:
你也可以这样做：
HTML
HTML
<body>
<div id="wrapper_1">
<div id="container_1"></div>
</div>
</body>
CSS
CSS
body { width: 100%; margin: 0; padding: 0; overflow: hidden; }
#wrapper_1 { clear: left; float: left; position: relative; left: 50%; }
#container_1 { display: block; float: left; position: relative; right: 50%; }
As Artem Russakovskiimentioned also, read the original article by Mattew James Taylorfor full description.
正如Artem Russakovskii也提到的，阅读Mattew James Taylor的原始文章以获得完整的描述。
回答by krithi k
<div class="content">Hello</div>
.content {
margin-top:auto;
margin-bottom:auto;
text-align:center;
}
回答by Alexandru
Honestly, I hate all the solutions I've seen so far, and I'll tell you why: They just don't seem to ever align it right...so here's what I usually do:
老实说，我讨厌到目前为止我看到的所有解决方案，我会告诉你原因：它们似乎从来没有正确对齐......所以这是我通常做的：
I know what pixel values each div and their respective margins hold...so I do the following.
我知道每个 div 和它们各自的边距保持什么像素值......所以我做以下事情。
I'll create a wrapper div that has an absolute position and a left value of 50%...so this div now starts in the middle of the screen, and then I subtract half of all the content of the div's width...and I get BEAUTIFULLY scaling content...and I think this works across all browsers, too. Try it for yourself (this example assumes all content on your site is wrapped in a div tag that uses this wrapper class and all content in it is 200px in width):
我将创建一个包装 div，它具有绝对位置和 50% 的左值……所以这个 div 现在从屏幕中间开始，然后我减去 div 宽度的所有内容的一半……我得到了漂亮的缩放内容……而且我认为这也适用于所有浏览器。亲自尝试一下（此示例假设您网站上的所有内容都包含在使用此包装类的 div 标签中，并且其中的所有内容的宽度均为 200 像素）：
.wrapper {
position: absolute;
left: 50%;
margin-left: -100px;
}
EDIT: I forgot to add...you may also want to set width: 0px; on this wrapper div for some browsers to not show the scrollbars, and then you may use absolute positioning for all inner divs.
编辑：我忘了添加...你可能还想设置宽度：0px; 在此包装 div 上，某些浏览器不显示滚动条，然后您可以对所有内部 div 使用绝对定位。
This also works AMAZING for vertically aligning your content as well using top: 50% and margin-top. Cheers!
这也非常适用于使用 top: 50% 和 margin-top 垂直对齐您的内容。干杯!
回答by Bloodhound
Here is a technique I use that has worked well:
这是我使用的一种效果很好的技术：
<div>
<div style="display: table-cell; width: 100%"> </div>
<div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>回答by nmak18
Below are the methods which have always worked for me
以下是一直对我有用的方法
- By using flex layout model:
- 通过使用 flex 布局模型：
Set the display of the parent div to display: flex;and the you can align the child elements inside the div using the justify-content: center;(to align the items on main axis) and align-items: center;(to align the items on cross axis).
将父 div 的显示设置为display: flex;，您可以使用justify-content: center;（对齐主轴上的项目）和align-items: center;（对齐横轴上的项目）对齐div 内的子元素。
If you have more than one child element and want to control the way they are arranged (column/rows), then you can also add flex-directionproperty.
如果您有多个子元素并且想要控制它们的排列方式（列/行），那么您还可以添加flex-direction属性。
Working example:
工作示例：
.parent {
align-items: center;
border: 1px solid black;
display: flex;
justify-content: center;
height: 250px;
width: 250px;
}
.child {
border: 1px solid black;
height: 50px;
width: 50px;
}<div class="parent">
<div class="child"></div>
</div>2. (older method) Using position, margin properties and fixed size
2.（旧方法）使用位置、边距属性和固定大小
Working example:
工作示例：
.parent {
border: 1px solid black;
height: 250px;
position: relative;
width: 250px;
}
.child {
border: 1px solid black;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 50px;
position: absolute;
width: 50px;
}<div class="parent">
<div class="child"></div>
</div>回答by Nicolas
All the answers talk about horizontal align.
所有的答案都在谈论水平对齐。
For vertical aligning multiple content elements, take a look at this approach:
对于垂直对齐多个内容元素，请看一下这种方法：
<div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
<div>
<p>Paragraph #1</p>
<p>Paragraph #2</p>
</div>
</div>回答by Diogo
Just another example using HTML and CSS:
另一个使用 HTML 和 CSS 的例子：
<div style="width: Auto; margin: 0 auto;">Hello</div>
