Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8833

html親要素より幅を小さくし中央に寄せる

$
0
0

サンプル用HTMLは以下です

<!DOCTYPE html><htmllang="ja"><head></head><body><header><linkrel="stylesheet"href="https://unpkg.com/ress/dist/ress.min.css"><linkrel="stylesheet"type="text/css"href="css/style.css"></header><divid='pageTitleRow'><h1id = 'pageTitle'>リクエスト</h1></div><divclass="requestContent">作品1</div><divclass="requestContent">作品2</div><divclass="requestContent">作品3</div><divclass="requestContent">作品4</div></body></html>

1.中央に寄せたい要素にmax-width,margin autoで中央に寄せる

.requestContent{max-width:1200px;margin:0auto;background-color:green;width:100%;}

2.上位要素をflex、centerにするなんてのもあるがトリッキーか?
 (他の要素もwidthの対処したし、、)

body{display:flex;justify-content:center;flex-wrap:wrap;}#pageTitle{width:100%;}.requestContent{max-width:1200px;background-color:green;width:100%;}

Viewing all articles
Browse latest Browse all 8833

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>