最近よく使われるレイアウトの例です。
例文
テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。
こういうのも。
例文
テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。
コンテンツは左揃えになっているが、コンテナは中央揃えになっています。
■margin: auto
一般的にmargin属性のautoを利用します。margin-leftとmargin-right両方autoだとブラウザは該当の要素を中央で表示します。
margin属性をmargin: 0 autoのように指定すると上下は0px、右左はautoで設定することができます。
■例
<style>
.container-ex1 {
margin: 0 auto;
width: 400px;
background: white;
padding: 15px;
}
</style>
<div style=”height: 300px;”>
<div class=”container-ex1″>
<h4 style=”margin:0; padding: 10px 0; font-size: 26px”>例文</h4>
<p>テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。テスト用の例文です。</p>
</div>
</div>
left: 50%とmargin-left: -値は、コンテナを中央揃えにするときあまり使われないが、absoluteの要素を中央に配置するとき使う場合があります。
