2

このセクションを含むレスポンシブ ページがあります。

<div id="team">
    <div class="person">
        <div class="photo"></div> 
        <div class="title"></div> 
    </div>
    <div class="person">
        <div class="photo"></div> 
        <div class="title"></div> 
    </div>
    <div class="person">
        <div class="photo"></div> 
        <div class="title"></div> 
    </div>
    <div class="person">
        <div class="photo"></div> 
        <div class="title"></div> 
    </div>
    <div class="person">
        <div class="photo"></div> 
        <div class="title"></div> 
    </div>
</div> 


#team {
    width: 100%;
    margin: 0 auto;
}
#team .person { 
    display: inline-block;
    text-align: left;
    cursor: default;
    margin: 0 3em;
}

team幅は 100% です。teamページ幅に応じて、ページの中央に揃える必要があります。ただし、子personは 内で左に揃える必要がありますteam。したがってperson、行を埋めないものがある場合は、左に揃える必要があります。助けていただけますか？

4

1 に答える 1

1

margin: 0 auto;実際には、固定幅の要素でのみ機能します。100% 幅に設定された div が中央に配置されることは期待できません。

のコンテンツを中央に配置したい場合は#team、 を適用するだけtext-align: center;です。.persondiv を次のように設定しているため、これは div に適用されます。display: inline-block;

ここの結果をチェックして、text-align: center;探しているものかどうかを確認してください: http://jsfiddle.net/Chs9X/

于 2013-01-31T22:58:01.573 に答える