如何将2个浮动div放在另一个div中

Question

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

.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）中间

Answer 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}

Answer 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}