Html 将 div 居中对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1740587/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align a div to center
提问by ACP
I want to float a divto center. Is it possible? text-align: centeris not working in IE.
我想将 a 浮动div到中心。是否可以？text-align: center不在 IE 中工作。
回答by cletus
There is no float to center per se. If you want to center a block element inside another do this:
本身没有浮动到中心。如果要将块元素居中放置在另一个元素中，请执行以下操作：
<div id="outer">
<div id="inner">Stuff to center</div>
</div>
with:
和：
#outer { width: 600px; }
#inner { width: 250px; margin: 0 auto; }
Now that won't make the text wrap around it (like it would with a float left or right) but like I said: there is no float center.
现在这不会使文本环绕它（就像向左或向右浮动一样），但就像我说的：没有浮动中心。
回答by ACP
This has always worked for me.
这一直对我有用。
Provided you set a fixed width for your DIV, and the proper DOCTYPE, try this
如果您为 DIV 设置了固定宽度和正确的 DOCTYPE，试试这个
div {
margin-left:auto;
margin-right:auto;
}
Hope this helps.
希望这可以帮助。
回答by DigitalRoss
The usual technique for this is margin:auto
通常的技术是 margin:auto
However, old IE doesn't grok this so one usually adds text-align: centerto an outer containing element. You wouldn't think that would work but the same IE's that ignore autoalso incorrectly apply the text align center to block level inner elements so things work out.
但是，旧的 IE 不理解这一点，因此通常会添加text-align: center到外部包含元素中。您不会认为这会起作用，但是忽略的相同 IEauto也会错误地将文本对齐中心应用于块级内部元素，以便解决问题。
And this doesn't actually do a real float.
这实际上并没有真正的浮动。
回答by T. Philipp
floating divs to center "works" with the combination of display:inline-block and text-align:center.
使用 display:inline-block 和 text-align:center 的组合使浮动 div 居中“有效”。
Try changing width of the outer div by resizing the window of this jsfiddle
尝试通过调整此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>
and the css:
和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;
}
回答by Bikram Shrestha
Following solution worked for me.
以下解决方案对我有用。
.algncenterdiv {
display: block;
margin-left: auto;
margin-right: auto;
}
回答by chiliNUT
One of my websites involves a div whose size is variable and you won't know it ahead of time. it is an outer div with 2 nested divs, the outer div is the same width as the first nested div, which is the content, and the second nested div right below the content is the caption, which must be centered. Because the width is not known, I use jQuery to adjust accordingly.
我的一个网站涉及一个大小可变的 div，你不会提前知道它。它是一个带有 2 个嵌套 div 的外部 div，外部 div 与第一个嵌套 div 的宽度相同，即内容，内容正下方的第二个嵌套 div 是标题，必须居中。由于宽度未知，我使用jQuery进行相应调整。
so my html is this
所以我的 html 是这个
<div id='outer-container'>
<div id='inner-container'></div>
<div id='captions'></div>
</div>
and then I center the captions in jQuery like this
然后我像这样将 jQuery 中的标题居中
captionWidth=$("#captions").css("width");
outerWidth=$("#outer-container").css("width");
marginIndent=(outerWidth-captionWidth)/2;
$("#captions").css("margin","0px "+marginIndent+"px");
回答by Huuu
Use "spacer" divs to surround the div you want to center. Works best with a fluid design. Be sure to give the spacers height, or else they will not work.
使用“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>
回答by zeah
This worked for me..
这对我有用..
div.className {
display: inline-block;
margin: auto;
}
回答by adarsh mohan
this could help you..:D
这可以帮助你..: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>回答by onux
this works nicely
这很好用
width:40%; // the width of the content div
right:0;
margin-right:30%; // 1/2 the remaining space
This resizes nicely with adaptive layouts also..
这也可以很好地调整自适应布局的大小。
CSS example would be:
CSS 示例是：
.centered-div {
position:fixed;
background-color:#fff;
text-align:center;
width:40%;
right:0;
margin-right:30%;
}
