如何将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}