2016-02-27

stylesheet:画像を中央に配置する

参考:
https://app.codegrid.net/entry/css-table-1
tableでwidthを指定しても幅が固定されない場合の対処法

1.スタイルシートに以下を設定した<div>を作る

        display: table;
        table-layout: fixed; // IEで横幅が変わらないようにするために必要


2.1の中に、スタイルシートに以下を設定した<div>を作る

            display: table-cell;
            text-align: center;
            vertical-align: middle;


3.2の中に、<img>を作る。
サイズに合わせて画像を縮小するために以下を設定する。

            max-width: 100%;
            max-height: 100%;


例えば、下記の通り。

      <div style="
        position: relative;
        top: 20px;
        left: 20px;
        width: 200px;
        height: 200px;
        display: table;
        table-layout: fixed;
      ">
        <div style="
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            line-height: 0;
        ">
                       <!-- line-heightに別の値が設定されていると若干ずれる -->
          <img src="image.jpg" style="
            max-width: 100%;
            max-height: 100%;
          ">
        </div>
      </div>

サンプル

※テキストを中央に配置する場合は、<img>の代わりに<span>を使う


以上