整列記事は、第三の要素を表示する中心

（フラーブラウザの幅に拡大したときに中央に第三の記事で）私は私のセクションの記事は、このように正確に表示するために取得しようとしています：https://www.screencast.com/t/vGdpZ91l 整列記事は、第三の要素を表示する中心

私は」 CSSのすべての表示オプションを調べました。現在のCSSはdisplay: inline-flex;

に設定されています。私のCSS/HTMLです。ヘルプは非常に高く評価されます。

.places h1 { 
 
    align-content: top-left; 
 
    font-size: 30px; 
 
} 
 

 
.places article { 
 
    display: inline-flex; 
 
    width: 390px; 
 
    border: #FF5A5F 1px solid; 
 
    border-radius: 4px; 
 
    padding: 20px; 
 
    margin: 20px; 
 
} 
 

 
.places article h2 { 
 
    font-size: 30px; 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
    <link rel="stylesheet" type="text/css" href="7-places.css" media="all"> 
 
    </head> 
 
    <body> 
 
    <header> 
 
    </header> 
 

 
    <div class="container"> 
 
     <section class="places"> 
 
     <h1>Places</h1> 
 
     <article class="home"> 
 
     <h2>Home</h2> 
 
     </article> 
 
     <article class="apartment"> 
 
     <h2>Apartment</h2> 
 
     </article> 
 
     <article class="dorm"> 
 
     <h2>Dorm</h2> 
 
     </article> 
 
     </section> 
 
    </div> 
 

 
    </body> 
 
</html>

出典

2017-02-17 jimmytt

親にフレックス使用し、flex-wrap: wrap; justify-content: center;に設定します。

.places { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
} 
 
.places h1 { 
 
    align-content: top-left; 
 
    font-size: 30px; 
 
    width: 100%; 
 
} 
 

 
.places article { 
 
    width: 390px; 
 
    border: #FF5A5F 1px solid; 
 
    border-radius: 4px; 
 
    padding: 20px; 
 
    margin: 20px; 
 
} 
 

 
.places article h2 { 
 
    font-size: 30px; 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <section class="places"> 
 
    <h1>Places</h1> 
 
    <article class="home"> 
 
     <h2>Home</h2> 
 
    </article> 
 
    <article class="apartment"> 
 
     <h2>Apartment</h2> 
 
    </article> 
 
    <article class="dorm"> 
 
     <h2>Dorm</h2> 
 
    </article> 
 
    </section> 
 
</div>

出典

2017-02-17 00:37:46

それは完全にマイケル・コーカーを働いた、ありがとうございました！ – jimmytt

@jimmytt awesome！ np :) –

@jimmytt btwもし 'h1'を' .places'から動かすと、 'h1'に' width：100％ 'を指定する必要はありませんが、マークアップを変更したくないあなたが現在働いているものが働くでしょう。 –

整列記事は、第三の要素を表示する中心

答えて

関連する問題