html - 显示 :inline-block and pseudo-element to do Vertically placed

Question

我正在使用 display:inline-block 和伪元素(::before, ::after)来做 [vertically-middle] 但是不行，伪元素会占一行 即使 width 是 0，我也不知道为什么？

我知道其他方法(比如 flex、position、line-height...) 我只是好奇，这有什么问题？ 谢谢大家。下面或这里的演示:https://jsfiddle.net/pm06tkjs/

.container{
  height: 200px;
  background: rgba(0, 0, 0, 0.2);
}

.container::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}

.img-group {
  display: inline-block;
  vertical-align: middle;
}

img {
  display: inline-block;
  margin-right: -4px;
  max-width: 20%;
  height: auto;
}

<div class="container">
  <div class="img-group">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
  </div>
</div>

Answer 1

内联元素之间的默认边距是个问题!为了解决这个问题，请为您的内联元素父级添加 font-size:0。

.container{
  height: 200px;
  background: rgba(0, 0, 0, 0.2);
  font-size:0;
}

.container::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}

.img-group {
  display: inline-block;
  vertical-align: middle;
  font-size:0;
}

img {
  display: inline-block;
  max-width: 20%;
  height: auto;
}

<div class="container">
  <div class="img-group">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
  </div>
</div>

有关如何删除内联元素之间间隙的更多详细信息，请查看 here