css - 如何在 2 个浮动 div 之间居中 div

Question

嗨，我在将内容 div 居中放置在左右侧边栏之间时遇到问题。我的左侧和骑行侧栏是浮动的，并且没有float:center. 我可以将其居中的唯一方法是使用填充，但这会使我的中心 div 位于我的侧边栏下方。

Answer 1

在所有 3 个 div 周围制作一个包装器，然后将居中的 div 定位为边距

<div id="wrap">
 <div id="left" style="float: left"></div>
 <div id="content" stlye="float: left: margin: 0 auto;"></div>
 <div id="right" stlye="float: left"></div>
</div>

Answer 2

这是一个工作的。

使用边距：0 自动；大多数时候会让你的元素居中。（快速说明：你的元素必须有一个声明的宽度才能工作。）

边距：0 自动；rule 是 0 上下边距和自动左右边距的简写。自动左右边距协同工作，将元素推入其容器的中心。

边距：0 自动；设置并非在每种居中情况下都可以完美运行，但在很多情况下都可以使用。
参考：你不能用 CSS

HTML浮动中心

<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>

CSS

.leftsidebar 
{ 
height: 608px; 
width: 60px; 
background:red; 
float:left; } 

.rightsidebar 
{ 
background:blue; 
height: 608px; 
width: 163px; 
float:right; 
} 

.content 
{ 
width: auto; //or any width that you want
margin:0 auto;
background:yellow;
}

Answer 3

<div style="widht: 960px;">
    <div class="content left">left</div>
     <div class="content center">center</div>
      <div class="content right">right</div>
      <div style="clear:both"></div>
</div>

这里的CSS

.content {
float: left;
}

.left , .right{
width : 180px;
margin : 0 10px;
}

.center{
widht: 540px;
margin : 0 10px;

}

Answer 4

浮动基础是：

<div id="left"> Left</div>
<div id="right" >right</div>
<div id="middle">in between, but after</div>

#left {float:left;width:XX;}
#right {float:right;width:XX;}
#middle {overflow:hidden; margin:0 XX;}

您也可以寻找其他方法将 div 保持在流程中 [left][middle][right]，例如使用 : display: table/table-cell | 内联块 | 柔性。