我想浮动div到中心。可能吗？text-align: center不能在 IE 中工作。
问问题
361238 次
14 回答
82
本身没有浮动到中心。如果要将块元素居中另一个元素，请执行以下操作：
<div id="outer">
<div id="inner">Stuff to center</div>
</div>
和：
#outer { width: 600px; }
#inner { width: 250px; margin: 0 auto; }
现在这不会使文本环绕它（就像它会向左或向右浮动）但就像我说的：没有浮动中心。
于 2009-11-16T07:20:58.490 回答
25
这一直对我有用。
如果你为你的 DIV 设置了一个固定的宽度，以及正确的 DOCTYPE，试试这个
div {
margin-left:auto;
margin-right:auto;
}
希望这可以帮助。
于 2012-09-28T18:03:27.480 回答
11
通常的技术是margin:auto
然而，旧的 IE 并不理解这一点，因此通常会添加text-align: center到外部包含元素。您不会认为这会起作用，但是忽略的相同 IEauto也会错误地将文本对齐中心应用于块级内部元素，因此事情会解决。
这实际上并没有真正的浮动。
于 2009-11-16T07:33:53.497 回答
6
以下解决方案对我有用。
.algncenterdiv {
display: block;
margin-left: auto;
margin-right: auto;
}
于 2013-10-07T07:02:22.053 回答
5
浮动 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;
}
于 2013-04-08T15:42:36.600 回答
4
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.
so my html is this
<div id='outer-container'>
<div id='inner-container'></div>
<div id='captions'></div>
</div>
and then I center the captions in jQuery like this
captionWidth=$("#captions").css("width");
outerWidth=$("#outer-container").css("width");
marginIndent=(outerWidth-captionWidth)/2;
$("#captions").css("margin","0px "+marginIndent+"px");
于 2013-02-18T02:00:08.703 回答
3
使用“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>
于 2010-07-11T17:17:26.397 回答
3
这对我有用..
div.className {
display: inline-block;
margin: auto;
}
于 2015-08-05T20:24:51.063 回答
1
这可以帮助你..：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>于 2015-05-25T09:22:49.917 回答
0
<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 并使用自动边距将其居中。
于 2012-09-02T20:55:42.467 回答
0
不，不是。
您可以在元素的右侧（float: left）或元素的左侧（float: right）使内容冒泡，但没有规定在两侧都有内容冒泡。
于 2009-11-16T07:46:25.187 回答
0
这很好用
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%;
}
于 2014-12-03T23:28:00.533 回答
0
这对我有用。
我在我的页面上包含了一个无序列表两次。一个 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; }
于 2015-02-10T22:46:01.033 回答
-1
试试这个，它对我有帮助：将 div 包装在标签中，问题是它也会使 div 的内容居中（如果没有另外编码）。希望有帮助:)
于 2014-02-23T00:11:09.113 回答