Comment centrer 2 divs flottant dans une autre div

Question

je le code haml suivante pour afficher un avatar de l'utilisateur et un surnom utilisateur + 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 

Je voudrais centrer mon .user_info_container dans le centre de la. page_section.header div. Comment puis-je y parvenir? Je le CSS suivant

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

    .user_details { 
     width: 88% 
    } 

    } 
} 

effet que je veux atteindre ... centrer l'avatar et le texte au milieu du div parent (.page_section)

Answer 1

Vous pouvez achive même effet avec display:inline-block; à l'enfant et à text-align:center; élément parent

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}