横幅が固定であれば中央揃えにする方法は下記です。
div.hoge { width: 800px; margin: 0 auto; }
横のマージンをautoにするだけです。
しかし、横幅が可変の場合はどうしたらよいのでしょうか?
参考サイト
上記によると、inline-block
を使えばよいとのことです。テキストみたいな扱いにできるやつで、text-alignが効くようになります。
やってみたら、やりたいこと出来たっぽいです。よかったです。
つくった画面
追記
やっぱりどうも不十分でした。画面サイズを小さくして、.card要素が収まりきらないと、中央揃えではなくなってしまうことに気づきました。諦めたいと思います。
つくったコード
<html> <head> <title>HOGE</title> <style> body { text-align: center; } .box { display: inline-block; margin: 10px; padding: 10px; } p { text-align: left; padding: 10px 20px; color: white; } .card { float: left; background: #09c; margin: 10px; padding: 10px; } </style> </head> <body> <div class="box"> <div class="card"> <img src="https://user-images.githubusercontent.com/28310715/55704126-68783700-5a16-11e9-8028-39b665cddf1a.png"><br> <p> hoge </p> </div> </div><br> <div class="box"> <div class="card"> <img src="https://user-images.githubusercontent.com/28310715/55704126-68783700-5a16-11e9-8028-39b665cddf1a.png"><br> <p> hogehogehgoe </p> </div> <div class="card"> <img src="https://user-images.githubusercontent.com/28310715/55704126-68783700-5a16-11e9-8028-39b665cddf1a.png"><br> <p> hogehogehgoe </p> </div> </div> </body> </html>