0

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

<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 之间的空间居中？

4

4 回答 4

0

非常简单 ：）

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

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/

于 2013-05-23T04:23:26.987 回答
0 
.user-link {
     margin-left: auto;
     margin-right: auto;
}
于 2013-05-22T18:02:12.047 回答
-1

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

.user-link {
  display: inline;
}

更新的小提琴

更新

我已经将 HTML 修改为我假设的内容：

新小提琴

于 2013-05-22T16:49:56.463 回答
-1

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

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

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

于 2013-05-22T16:50:47.927 回答