将 div 居中对齐

Question

我想将 div 浮动到中心。是否可以？ text-align: center 在 IE 中不起作用。

Answer 1

本身没有浮动到中心。如果您想将一个块元素置于另一个块元素的中心，请执行以下操作：

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

with：

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

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

Answer 2

这一直对我有用。

如果您为 DIV 设置了固定宽度和正确的 DOCTYPE，请尝试此

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

希望这会有所帮助。

Answer 3

通常的技术是 margin:auto

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

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

Answer 4

浮动div居中“工作”与display：inline-block和text-align：center的组合。

的窗口大小来更改外部 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>

尝试通过调整 jsfiddle和 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;
}

Answer 5

以下解决方案对我有用。

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

Answer 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");

Answer 7

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

<style>
div.row{width=100%;}
dvi.row div{float=left;}
#content{width=80%;}
div.spacer{width=10%; height=10px;}
</style>

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

Answer 8

这对我有用..

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

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

Answer 10

不，不是。

您可以将内容冒泡到元素的右侧 (float: left) 或元素的左侧 (float: right)，但没有规定让内容在两侧冒泡。

Answer 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 并使用 margin auto 将其居中。

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

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

Answer 14

试试这个，它帮助了我：将 div 包装在标签中，问题是它也会将 div 的内容居中（如果没有以其他方式编码）。希望有帮助:)