I have the following haml code to display a user avatar and a user nickname + bio\[code\].page_section.header .user_info_container //float left .avatar_container.pull_left .avatar %a.fancy{href: "<%= user.original_avatar_url %>"} %img{:src =http://stackoverflow.com/questions/14053198/>"/v1/users/<%= user.nickname %>/picture/large"} //float left .user_details.pull_left .name %h1 <%= user.name %> <%= user.description %> .clearfix\[/code\]I would like to center my .user_info_container in the center of the .page_section.header div. How can I achieve that. I have the following css\[code\].page_section.header { padding: 0 0 6px; min-height: 120px; text-align: center; .user_info_container { .avatar_container { width: 12% } .user_details { width: 88% } }}\[/code\]
Effect I want to achieve... to center the avatar and text in the middle of the the parent div (.page_section)