Question

我有一个包含三个元素的div：A，B和C.我希望A和B分别位于最左侧和右侧，C位于div的中心。我左右浮动A和B，并将B与中心对齐。不幸的是，这不是在div的中心对齐C，而是在A和B之间的空间中心。这是一个demo

<div id="user-links">
   <div class="user-link1"> <a href=""> Timeline </a></div>
   <div class="user-link"> 5 Following  </div>
   <div class="user-link2"> <a href=""> <strong> + Follow </strong> </a></div>
</div>

#user-links {
  width:500px;
  height:500px;
  background-color:red;
}
.user-link1 {
   float: left;
   margin:5px;
   width:200px;
   height:200px;
   background-color:yellow;
 }
.user-link2 {
   float: right;
  width:150px;
  height:150px;
  margin:5px;
   background-color:blue;
  }

 .user-link {
   text-align:center;
  }

如何将元素与主div相对应，而不是相对于左右浮动的2个div之间的空间？

Answer 1

.user-link {
     margin-left: auto;
     margin-right: auto;
}

Answer 2

像饼一样容易：）

将第一个和第三个浮动到左侧，第二个浮动到右侧。

CSS代码：

#user-links {
    width:800px;
    height:400px;
    background:#CCC;
}

.user-link1, .user-link2 {
    float:left;
}

.user-link, .user-link1 {
    width:200px;
}

.user-link1 {
    background:blue;
}

.user-link {
    float:right;
    background:red;
}

.user-link2 {
    width:400px;
    background:green;
}

JS小提琴：http://jsfiddle.net/MJ6vf/

Answer 3

您想将display: inline;添加到.user-link class:

.user-link {
  display: inline;
}

<强> Updated fiddle

<强>更新

我已经将HTML修改为我认为你之后的内容：

<强> New Fiddle

Answer 4

如果你用你的CSS做这样的事情：

 .user-link {
   text-align:center;
   float:left;
  }

它会起作用，但你必须给它一个宽度，因为如果你不这样做，它将在大型条目中失去结构......

CSS：包含浮点数的div中的中心元素

4 个答案: