Question

我想将div浮动到中心位置。可能吗？ text-align: center无法在IE中运行。

Answer 1

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

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

使用：

#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的组合。

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

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 =“horizontal”。由于列表向左浮动，我需要一个内部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的内容居中（如果没有其他编码）。希望有所帮助：）

将div与中心对齐

14 个答案:

通常的技术是`margin:auto`

将div与中心对齐

14 个答案:

通常的技术是margin:auto

通常的技术是`margin:auto`