如何使浮动的div : left的内容居中？
如何使浮动的div : left的内容居中？
提问于 2009-07-05 19:23:17
我发现了this 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;
}然后我有几个连续的按钮，我想像这样使用...
<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>请参阅此示例：http://reljac.com/csstest.php
但这行按钮可能需要居中对齐，而不是全部向右或向左。如果我将CSS更改为...
.buttons a, .buttons button{
/*display:block;
float:left;*/
margin:0 7px 0 0;当存在图像时，按钮不再正确显示，特别是在IE 6、7和8中。
请参阅此示例：http://reljac.com/csstest_wo.php
我可以将浮动更改为右对齐，以使按钮右对齐，但我不知道如何使它们居中(就像在<td></td>中一样)。
所以简而言之，我想要使用它的样式，但我也需要能够居中对齐按钮，如果必要的话。
回答 1
Stack Overflow用户
回答已采纳
发布于 2009-07-05 19:29:23
尝试将此代码添加到CSS：
.buttons
{
text-align:center;
margin: 0px auto 0px auto;
}自动使两边的边距相等。文本对齐对于较老的浏览器来说是一个障碍。
编辑：
在按钮周围添加一个额外的div，称为buttonwrapper。然后应用此CSS
.buttonwrapper
{
position:relative;
float:left;
left:50%;
}
.buttons
{
position:relative;
float:left;
left:-50%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1084666
复制相关文章
相似问题