css - 固定高さのスペース内で画像を垂直方向に均等に配置します

Question

固定高さの div に垂直に配置された 3 つの画像があります。画像が追加または削除されても、それらの間の上下のパディングが残るようにするにはどうすればよいですか。

Div の高さが 100px で、画像の高さが 20px だとします。したがって、20px の 3 つの画像を合計すると 60px になります。残りの 40px は、画像間のパディングとして均等に分配されます。

同様に、別の画像が追加された場合、残りの 20px はすべての画像間の合計パディングになります。

プロパティ : vertical-align: middle はここでは機能しません。

Answer 1

あなたはしたい：

1. display:table固定の高さでdiv を設定し、
2. <img>と で各要素をラップdisplay:table-rowしますdisplay:table-cell
3. に画像を設定しますdisplay:block
4. table-cell 要素をvertical-align:middle
5. 最初と最後の行の高さを画像自体と同じ高さに設定する

これにより、スペースが垂直方向に均等に分散されます。

デモ: http://jsfiddle.net/X2URZ/2/

コード：

<ul id="img-list">
  <li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
  <li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
  <li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
</ul>​

#img-list { display:table; height:100px }
#img-list img { height:20px; display:block }
#img-list li { display:table-row }
#img-list li span { display:table-cell; vertical-align:middle; background:red }
#img-list li:first-child,
#img-list li:last-child { height:20px }​

Answer 2

次回検索するときに、これに出くわすことはわかっています。これは自分の参考として残しておきます。違いは、要素自体の高さを固定する必要がないことです。

http://codepen.io/anon/pen/ojBPaq?editors=110

HTML

<ul>
  <li><div class="tile-wrap one"><div class="tile">wefwfwefww efwefwfwfewfwef wefwfwf wefwfe wefwf wefwfwfwfwf wef wefwfe</div></div></li>
  <li><div class="tile-wrap two"><div class="tile"></div></div></li>
  <li><div class="tile-wrap three"><div class="tile"></div></div></li>
</ul>

CSS

* { box-sizing: border-box; }

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: grey;
  width: 500px;
  height: 400px;
  display: table;
}

li {
  display: table-row;
  background: aqua;
  vertical-align: bottom;
}

.tile-wrap {
  display: table-cell;
  vertical-align: middle;
}

.one {
  vertical-align: top;
}

.two {
  vertical-align: middle;
}

.three {
  vertical-align: bottom;
}

.tile-wrap .tile {
  width: 100px;
  min-height: 100px;
  background: white;
  border: 1px solid blue;

}