DEV

CSS - 横幅が固定ではないときに中央揃えにする方法（微妙だった）

#CSS

横幅が固定であれば中央揃えにする方法は下記です。

div.hoge {
  width: 800px;
  margin: 0 auto;
}

横のマージンをautoにするだけです。

しかし、横幅が可変の場合はどうしたらよいのでしょうか？

参考サイト

http://tanihiro.hatenablog.com/entry/2014/03/27/214144 — tanihiro.hatenablog.com

上記によると、inline-blockを使えばよいとのことです。テキストみたいな扱いにできるやつで、text-alignが効くようになります。 やってみたら、やりたいこと出来たっぽいです。よかったです。

つくった画面

f:id:edo1z:20190831011400p:plain

追記

やっぱりどうも不十分でした。画面サイズを小さくして、.card要素が収まりきらないと、中央揃えではなくなってしまうことに気づきました。諦めたいと思います。

f:id:edo1z:20190831183100p:plain

つくったコード

<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>