CSS 如何将浮动的 div 的内容居中：左？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1084666/
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
How can I center the contents of a div that float: left?
提问by Jason
I found this articleand I decided that I liked the way they styled links and buttons. So I took the CSS from the article...
我找到了这篇文章，我决定喜欢他们设计链接和按钮的方式。所以我从文章中获取了 CSS ......
.buttons a, .buttons button{
display:block;
float:left;
margin:0 7px 0 0;
background-color:#f5f5f5;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:100%;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:#565656;
cursor:pointer;
padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
width:auto;
overflow:visible;
padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
*:first-child+html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
}
Then I have several buttons in a row I want to use like this...
然后我连续有几个按钮我想像这样使用......
<div class="buttons">
<a href="/password/reset/"><img src="pict1.png" class="positive" alt=""/>Button 1</a>
<a href="/password/reset/"><img src="pict2.png" alt=""/>Button 2</a>
<a href="/password/reset/"><img src="pict3.png" class="negative" alt=""/>Button 3</a>
</div>
See this example: http://reljac.com/csstest.php
看这个例子：http: //reljac.com/csstest.php
But that row of buttons may need to be aligned center, not all to the right or left. If I change the CSS to...
但是那排按钮可能需要居中对齐，而不是全部向右或向左对齐。如果我将 CSS 更改为...
.buttons a, .buttons button{
/*display:block;
float:left;*/
margin:0 7px 0 0;
The buttons no longer appear correctly when there is an image, specifically in IE 6,7 & 8.
当有图像时，按钮不再正确显示，特别是在 IE 6,7 和 8 中。
See this example: http://reljac.com/csstest_wo.php
看这个例子：http: //reljac.com/csstest_wo.php
I can change the float to right to get the buttons to align right but I can't figure out what to do to get them centered (like in a <td></td>).
我可以将浮动更改为右侧以使按钮正确对齐，但我不知道该怎么做才能使它们居中（例如在 a 中<td></td>）。
So the short of it is I want to use the style as it is but I also need to be able to center justify the buttons if necessary.
所以简而言之，我想按原样使用该样式，但如有必要，我还需要能够将按钮居中对齐。
回答by Eric
Try adding this to the CSS:
尝试将其添加到 CSS：
.buttons
{
text-align:center;
margin: 0px auto 0px auto;
}
The auto makes the margins equal on each side. The text-align is a bodge for older browsers.
自动使每边的边距相等。text-align 是旧浏览器的一个bodge。
EDIT:
编辑：
Add an extra div around the buttons called buttonwrapper. then apply this CSS
在名为 buttonwrapper 的按钮周围添加一个额外的 div。然后应用这个 CSS
.buttonwrapper
{
position:relative;
float:left;
left:50%;
}
.buttons
{
position:relative;
float:left;
left:-50%;
}
Method taken (but not tested) from http://www.pmob.co.uk/temp/centred-float4.htm
从http://www.pmob.co.uk/temp/centred-float4.htm采用（但未测试）的方法
回答by Kazkade
I found that when you have a parent div float left and a child div you're trying to center, a lot of times people forget inheritance.
我发现当你有一个父 div 浮动左侧和一个子 div 你试图居中时，很多时候人们会忘记继承。
HTML:
HTML：
<div class="parent">
<div class="child">
Text
</div>
</div>
CSS:
CSS：
.parent {
float: left;
width: 300px;
}
.child {
float: none; /* <-- IMPORTANT! */
width: 200px;
margin-left: auto;
margin-right: auto;
}
IMPORTANT: Inheritance states that the child div is also floated left. So, make sure that the child div has no float, then margin: auto like usual.
重要提示：继承声明子 div 也向左浮动。所以，确保子 div 没有浮动，然后像往常一样 margin: auto 。
