css - 如何在另一个 div 中居中 2 个浮动 div

Question

我有以下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）的中间

Answer 1

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

演示

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}