Geek asks and answers

Evenly distribute images vertically in a space with a fixed height

I have 3 images aligned vertically at a fixed height div. How can I make sure that the top and bottom padding between them remains even when adding or removing an image.

Let's say the Div height is 100 pixels and the image height is 20 pixels. Thus, 3 images with 20px are summed up to 60 pixels. The remaining 40px should be evenly distributed as a complement between images.

Similarly, when another image is added, the remaining 20px should be indented between all images.

Property: vertical-align: middle does not work here.

+5
source share
2 answers

Do you want to:

  • div display:table ,
  • <img> display:table-row display:table-cell
  • display:block
  • - vertical-align:middle
  • ,

.

: 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 }​
+7

, , . . :

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;

}
0

More articles:


All Articles