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

方法1 ：您可以将img组的宽度设置为小于100％的百分比。

.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;
    width: 99%;
}

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>

方法2 ：您正在使用显示内联块属性，并且还在图像边缘使用右行。因此，显示内联块还会在图像块周围占用一些额外的空间。因此，您可以根据需要添加100％的宽度，还可以添加负数的边距。

.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;
        width: 100%;
        margin-left: -4px;
    }

    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 2

内联元素之间的

默认边距是问题！要解决此问题，请为您的内联元素父项添加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

display：inline-block和伪元素做垂直放置

2 个答案: