对齐 div 中的内容

我使用 css 样式的文本对齐来对齐 HTML 中容器内的内容。当内容为文本或者浏览器为 IE 时，这种方法可以很好地工作。但除此之外，它不起作用。

顾名思义，它基本上是用来对齐文本的。

有没有其他方法来校准 html 中的内容？

544944 次浏览
小开
最佳答案

文本对齐对齐文本和其他内联内容。它不对齐块元素子元素。

要做到这一点，您需要给元素赋予一个宽度，左右边距为“ auto”。除了 IE5.x 之外，这种兼容标准的方式在任何地方都可以使用。

<div style="width: 50%; margin: 0 auto;">Hello</div>

为了在 IE6中工作，您需要使用合适的 DOCTYPE 来确保 标准模式处于打开状态。

如果你真的需要支持 IE5/Quirks 模式，这些天你不应该真的这样做，这是可能的结合两种不同的方法，以中心:

<div style="text-align: center">
<div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>

(显然，样式最好放在样式表中，但内联版本是说明性的。)

小开

只是另一个使用 HTML 和 CSS 的例子:

<div style="width: Auto; margin: 0 auto;">Hello</div>
小开

你也可以这样做:

超文本标示语言

<body>
<div id="wrapper_1">
<div id="container_1"></div>
</div>
</body>

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%; }

正如 Artem Russakovskii也提到的，阅读原来的文章由 马特・詹姆斯・泰勒的完整描述。

小开

老实说，到目前为止我所看到的所有解决方案我都很讨厌，我来告诉你为什么: 它们似乎从来没有正确地对齐过... ... 所以我通常是这样做的:

我知道每个 div 的像素值以及它们各自的边距... ... 所以我做了以下操作。

我将创建一个包装器 div，它有一个绝对位置和一个50% 的左值... ... 所以这个 div 现在从屏幕中间开始，然后我减去所有 div 宽度的一半... ... 我得到了漂亮的缩放内容... ... 我认为这也适用于所有浏览器。自己试试(本例假设站点上的所有内容都包装在一个 div 标记中，该标记使用这个包装器类，其中的所有内容宽度为200px) :

.wrapper {
position: absolute;
left: 50%;
margin-left: -100px;
}

编辑: 我忘了添加... 你可能还想设置宽度: 0px; 在这个包装 div 上，一些浏览器不显示滚动条，然后你可以对所有内部 div 使用绝对定位。

这也工程令人惊异的垂直对齐您的内容以及使用顶部: 50% 和边缘-顶部。干杯！

小开

下面是我使用过的一个很有效的技巧:

<div>
<div style="display: table-cell; width: 100%">&nbsp;</div>
<div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>

小开 
<div class="content">Hello</div>


.content {
margin-top:auto;
margin-bottom:auto;
text-align:center;
}
小开

所有的答案都是水平对齐。

对于垂直对齐多个内容元素，可以看看这种方法:

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

小开

以下是一直对我有效的方法

  1. 通过使用 flex 布局模型 :

将父 div 的显示设置为 display: flex;，您可以使用 justify-content: center;(在主轴上对齐项)和 align-items: center;(在十字轴上对齐项)对齐 div 内的子元素。

如果您有多个子元素，并且希望控制它们的排列方式(列/行) ，那么还可以添加 flex-direction属性。

实例:

.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. (旧方法)使用位置、边距属性和固定大小

实例:

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


提交答案