1

ユーザーアバターとユーザーニックネーム+バイオを表示する次の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）の中央に配置する

4

2 に答える 2

16

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}
于 2012-12-27T11:01:08.893 に答える