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

Question

I'm using display:inline-block and pseudo-element( ::before , ::after ) to do [ vertically - middle ] but it's not working, pseudo-element will occupy a row even it width is 0 , I don't know why?

I know other methods to do it(likes flex , position , line-height ...) I just curious, what's wrong in this? Thank you everyone. Demo below or here : 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

Approach 1 : You Can set the width of img-group less than 100% percentage.

 .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> 

Approch 2 : You are using display inline block property and on image margin right also. So display inline block also takes some extra space around the image block. So you can add width 100% if you want to and also add the margin left in negative.

 .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

default margin between your inline element is the problem! for solving it add font-size:0 for your inline element parent.

 .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> 

for more detail for how to remove gap between inline elements check here