将divalignment中心

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

Answer 1

本身没有中心浮点。 如果你想要在另一个块中embedded一个块元素，可以这样做：

 <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到一个外部包含元素。 你不会认为这将工作，但相同的IE忽略auto也错误地应用文本alignment中心来阻止水平的内部元素，所以事情成真。

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

Answer 4

浮动div显示：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

我的一个网站涉及一个div，其大小是可变的，你不会提前知道它。 它是一个带有两个嵌套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 6

以下解决scheme为我工作。

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

Answer 7

使用“spacer”div来包围你想要居中的div。 最适合stream体devise。 一定要给垫片高度，否则他们将无法正常工作。

 <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

这可以帮助你..：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 9

这对我有用..

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

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

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

Answer 13

这很好地工作

 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 14

这对我有效。

我在我的页面上列出了一个无序列表两次。 一个div class =“menu”id =“vertical”，另外一个是div class =“menu”id =“horizo​​ntal”。 由于名单是左侧浮动，我需要一个内部股利中心。 见下文。

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