问题在两个浮点数之间居中一个 div答案

【问题标题】：Issue centering a div between two floats问题在两个浮点数之间居中一个 div
【发布时间】：2013-04-04 03:55:19
【问题描述】：

我在这个网站上找到了 center a div between two floats 的解决方案。该解决方案工作正常，只是我现在有一个双边框。

CSS

.trilink_container {
margin:5px;
overflow: hidden; /* contain floated elements */
}

.trilink_all {
border: 1px solid #CCCCCC;
color: #444444;
text-shadow: 0 1px 1px #F6F6F6;
background: #fdfdfd;
background: -o-linear-gradient(top,  #fdfdfd,  #eee);
background: -ms-linear-gradient(top,  #fdfdfd,  #eee);
background: -moz-linear-gradient(top,  #fdfdfd,  #eee);
background: -webkit-gradient(linear,  left top,  left bottom,  color-stop(0,  #fdfdfd),  color-stop(1,  #eee));
background: -webkit-linear-gradient(#fdfdfd,  #eee);
background: linear-gradient(top,  #fdfdfd,  #eee);
text-align:center;
 }

.trilink_item {
float: left; 
width: 32%;
margin-left:5px;
}

.trilink_right {
float: right; 
width: 32%;
margin-right:5px;
}

.trilink_center {
margin-left: auto;
margin-right: auto;
}

HTML

<div class="trilink_container">

<div class="trilink_item trilink_all">Left Test</div>
<div class="trilink_right trilink_all">Right Text</div>
<div class="trilink_center trilink_all">Centre Text</div>

</div>

我还将代码添加到 jfiddle。

顺便说一句，我意识到我的编码有点乱，一旦我有解决方案就打算整理一下:)

有什么想法吗？

【问题讨论】：

标签： css css-float center

【解决方案1】：

将overflow: hidden（或auto；除visible 之外的任何内容）添加到.trilink_center，我相信您会得到您想要的（see this fiddle）。

这会建立一个新的block formatting context，它会改变流程的工作方式。请参阅this article 进行一些讨论。

【讨论】：

谢谢，这确实有效，我会像您第一次一样将其标记为正确答案:)

【解决方案2】：

如果要删除双边框，只需从 left 和 right div 中删除 margin

.trilink_item {
    float: left; 
    width: 32%;
    //margin-left:5px; remove it
    }

.trilink_right {
    float: right; 
    width: 32%;
    //margin-right:5px; remove it
    }

JS Fiddle Example

【讨论】：

【解决方案3】：

如果你想消除边缘附近的双边框，试试这个fiddle。它分别删除左右 div 的 border-left 和 border-right

【讨论】：

【解决方案4】：

`.trilink_center {

 margin-left: auto;
 margin-right: auto;
 /* float left or right
 float: left;

仅此而已

【讨论】：