将 div 对齐到中心

Posted 2023-03-05

【中文标题】将 div 对齐到中心

【英文标题】：Align a div to center

【发布时间】：2010-12-16 23:16:42

【问题描述】：

我想将div 浮动到中心。可能吗？ text-align: center 在 IE 中不工作。

【参考方案1】：

本身没有浮动到中心。如果你想在另一个块元素中居中，请执行以下操作：

<div id="outer">
  <div id="inner">Stuff to center</div>
</div>

与：

#outer  width: 600px; 
#inner  width: 250px; margin: 0 auto; 

现在这不会使文本环绕它（就像它会向左或向右浮动一样）但就像我说的：没有浮动中心。

【讨论】：

对于那些在这样做后感到沮丧但仍然无法正常工作的人，请输入 'display:inline-block;'在你的“#outer”参数中

我知道这是一个老问题。现在我们可以简单地使用

另外，要覆盖浮动，请将其设置为无

【参考方案2】：

这一直对我有用。

如果你为你的 DIV 设置了一个固定的宽度和正确的 DOCTYPE，试试这个

div         
  margin-left:auto;
  margin-right:auto;

希望这会有所帮助。

【讨论】：

这也适用于非固定宽度的 DIV，只需添加 display: table;

@alanaktion 绝妙的提示！

【参考方案3】：

通常的技术是margin:auto

但是，旧的 IE 不理解这一点，因此通常将text-align: center 添加到外部包含元素。您不会认为这会起作用，但忽略 auto 的相同 IE 也会错误地将文本对齐中心应用于块级内部元素，因此事情会解决。

这实际上并没有真正的浮动。

【讨论】：

文本对齐中心在 IE 中不起作用...罗斯出租车给我任何其他答案

请注意，“旧 IE”是指 IE 5.x 及更早版本，现在大多数人并不关心。

你甚至不需要在 IE6 上做text-align: center 吗？

仅在 Quirks 模式下（并且您不应该使用 Quirks 模式，除非在真正特殊的情况下）

【参考方案4】：

以下解决方案对我有用。

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

【参考方案5】：

结合 display:inline-block 和 text-align:center 将浮动 div 居中“工作”。

尝试通过调整 jsfiddle 的窗口大小来改变外部 div 的宽度

<div class="outer">
    <div class="block">one</div>
    <div class="block">two</div>
    <div class="block">three</div>
    <div class="block">four</div>
    <div class="block">five</div>
</div>

和css：

.outer 
    text-align:center;
    width: 50%;
    background-color:lightgray;


.block 
    width: 50px;
    height: 50px;
    border: 1px solid lime;
    display: inline-block;
    margin: .2rem;
    background-color: white;

【参考方案6】：

我的一个网站涉及一个大小可变的 div，您不会提前知道它。它是一个带有2个嵌套div的外部div，外部div与第一个嵌套div的宽度相同，也就是内容，第二个嵌套在内容下方的div是标题，必须居中。因为不知道宽度，所以我使用jQuery进行相应的调整。

所以我的html是这样的

<div id='outer-container'>
<div id='inner-container'></div>
<div id='captions'></div>
</div>

然后我像这样在 jQuery 中将标题居中

captionWidth=$("#captions").css("width");
outerWidth=$("#outer-container").css("width");
marginIndent=(outerWidth-captionWidth)/2;
$("#captions").css("margin","0px "+marginIndent+"px");

【参考方案7】：

使用“spacer” div 将要居中的 div 包围起来。最适合流体设计。一定要给垫片高度，否则它们将不起作用。

<style>
div.rowwidth=100%;
dvi.row divfloat=left;
#contentwidth=80%;
div.spacerwidth=10%; height=10px;
</style>

<div class="row">
<div class="spacer"></div>
<div id="content">...</div>
<div class="spacer"></div>
</div>

【参考方案8】：

这对我有用..

div.className 
display: inline-block;
margin: auto;

【讨论】：

我试图在外部 div 中浮动动态创建的 div.. 我可以有 1 或 2 个 div.. 如果有 1 个 div 那么它应该浮动在中心，如果有 2 个 div 然后浮动并排..我希望它清楚:)

【参考方案9】：

这可以帮助你..:D

div#outer 
  width:200px;
  height:200px;
  float:left;
  position:fixed;
  border:solid 5px red;

div#inner 
  border:solid 5px green;

<div id="outer">
  <center>
    <div id="inner">Stuff to center</div>
  </center>
</div>

【参考方案10】：

不，不是。

您可以将内容气泡置于元素右侧 (float: left) 或元素左侧 (float: right)，但没有规定两边都出现内容气泡。

【参考方案11】：

<div id="outer" style="z-index:10000;width:99%;height:200px;margin-top:300px;margin-left:auto;margin-right:auto;float:left;position:absolute;opacity:0.9;">

<div id="inner" style="opacity:1;background-color:White;width:300px;height:200px;margin-left:auto;margin-right:auto;">Inner</div></div>

将背景中的 div 浮动到最大宽度，在其中设置一个不透明的 div 并使用自动边距将其居中。

【参考方案12】：

这很好用

width:40%; // the width of the content div
right:0;
margin-right:30%; // 1/2 the remaining space

这也可以通过自适应布局很好地调整大小..

CSS 示例是：

.centered-div 
   position:fixed;
   background-color:#fff;
   text-align:center;
   width:40%;
   right:0;
   margin-right:30%;

【参考方案13】：

这对我有用。

我在我的页面上包含了两次无序列表。 一个 div class="menu" id="vertical" 另一个居中的是 div class="menu" id="horizo​​ntal"。由于列表向左浮动，因此我需要一个内部 div 将其居中。见下文。

<div class=menu id="horizontal">
<div class="fix">
  Centered stuff
</div>
</div>

.menu#horizontal  display: block;  float: left; margin: 0px; padding: 0 10px; position: relative; left: 50%; 
#fix  float: right; position: relative; left: -50%; margin: 0px auto; 

【参考方案14】：

试试这个，它对我有帮助：将 div 包装在标签中，问题是它也会使 div 的内容居中（如果没有另外编码）。希望对您有所帮助:)