如何在另一个 div 中居中 2 个浮动 div答案

【问题标题】：How to center 2 floating divs within another div如何在另一个 div 中居中 2 个浮动 div
【发布时间】：2012-12-27 10:32:06
【问题描述】：

我有以下haml代码来显示用户头像和用户昵称+简历

.page_section.header
  .user_info_container
    //float left
    .avatar_container.pull_left
      .avatar
        %a.fancy{href: "<%= user.original_avatar_url %>"}
          %img{:src => "/v1/users/<%= user.nickname %>/picture/large"}
    //float left
    .user_details.pull_left
      .name
        %h1 <%= user.name %>
        <%= user.description %>

    .clearfix

我想将我的 .user_info_container 放在 .page_section.header div 的中心。我怎样才能做到这一点。我有以下css

.page_section.header {
  padding: 0 0 6px;
  min-height: 120px;
  text-align: center;
  .user_info_container {
    .avatar_container {
      width: 12%
    }

    .user_details {
      width: 88%
    }

  }
}

我想要实现的效果...将头像和文字居中在父div的中间（.page_section）

【问题讨论】：

请发布 HTML，不是每个人都知道 HAML。
CSS/SASS 也是如此（只是注意到那不是 CSS）:)
你能给我们看看你的浏览器渲染代码还是创建一个fiddle
人们是否认真地否决了这个问题，因为它包含 HAML/SASS？

标签： css html haml centering

【解决方案1】：

您可以通过display:inline-block; 对子元素和text-align:center; 对父元素实现相同的效果

DEMO

HTML

<div class="main">
    <div class="div1">One </div>
    <div class="div2">two</div>
  </div>

CSS

.main {text-align:center;border:solid 1px #000;}
.main .div1,
.main .div2  {display:inline-block; border:solid 1px #f00; margin:2px;padding:10px}

【讨论】：

但如果 div 是浮动的，即左右浮动，它似乎不起作用？
为什么需要浮动 div？当你可以在你的条件下使用display:inline-block;

【解决方案2】：

您始终可以将浮动 divs 的父级内联块设置为中心，并将 text-align: center 提供给祖父

HTML

<div class="text-center">
    <div class="parent"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

CSS

.text-center {text-align: center;}
.parent {overflow: hidden; display: inline-block;}
.child {float: left}

【讨论】：

发布仅代码的答案对于回答原始问题几乎没有作用。请提供一些解释，说明为什么您的答案是正确答案。