柔性盒居中不起作用

Question

So I have been working with flex box recently and have the hand of positioning but justification is still being difficult.

I want X images to sit side by side in flex boxes, and then wrap when the page gets too small for them. This all works fine. However what isn't happening is the images inside the flex box aren't centering horizontally. I have tried every combo of justify-content, align-items, align-self etc to get it to work but I appear to be missing something.

here is the code

 body { background: black; } .general_peer_request_display { display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px; } .general_peer_request_box { flex: 1 1 90px; padding: 5px; align-items: center; justify-content: center; } .general_peer_request_image { width: 80px; height: 80px; border-radius: 50% 50% 50% 50%; border: 3px double white; background: blue; } .general_peer_request_text { opacity: 0; padding: 3px 5px 3px 0px; text-align: left; padding: 15px 5px 15px 5px; width: 80px; } .general_peer_request_text:hover { opacity: 1; color: rgba(255, 255, 255, 1); text-shadow: 1px 1px white; cursor: pointer; } 

 <div class="general_peer_request_display"> <div class="general_peer_request_box"> <div class="general_peer_request_image" style="background: url('') center no-repeat;"> <div class="general_peer_request_text">Neo</div> </div> </div> <div class="general_peer_request_box"> <div class="general_peer_request_image" style="background: url('') center no-repeat;"> <div class="general_peer_request_text">Neo</div> </div> </div> <div class="general_peer_request_box"> <div class="general_peer_request_image" style="background: url('') center no-repeat;"> <div class="general_peer_request_text">Neo</div> </div> </div> <div class="general_peer_request_box"> <div class="general_peer_request_image" style="background: url('') center no-repeat;"> <div class="general_peer_request_text">Neo</div> </div> </div> </div> 

Thank you.

Answer 1

You simply need to add margin:auto inside the boxes OR make their container display:flex (what you forgot)

 body { background: black; } .general_peer_request_display { display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px; } .general_peer_request_box { flex: 1 1 90px; padding: 5px; /* Or this instead of margin auto display:flex; align-items: center; justify-content: center; */ } .general_peer_request_image { width: 80px; height: 80px; border-radius: 50% 50% 50% 50%; border: 3px double white; background: blue; margin:auto; /*Added this*/ } .general_peer_request_text { opacity: 0; padding: 3px 5px 3px 0px; text-align: left; padding: 15px 5px 15px 5px; width: 80px; } .general_peer_request_text:hover { opacity: 1; color: rgba(255, 255, 255, 1); text-shadow: 1px 1px white; cursor: pointer; } 

 <div class="general_peer_request_display"> <div class="general_peer_request_box"> <div class="general_peer_request_image" style="background: url('') center no-repeat;"> <div class="general_peer_request_text">Neo</div> </div> </div> <div class="general_peer_request_box"> <div class="general_peer_request_image" style="background: url('') center no-repeat;"> <div class="general_peer_request_text">Neo</div> </div> </div> <div class="general_peer_request_box"> <div class="general_peer_request_image" style="background: url('') center no-repeat;"> <div class="general_peer_request_text">Neo</div> </div> </div> <div class="general_peer_request_box"> <div class="general_peer_request_image" style="background: url('') center no-repeat;"> <div class="general_peer_request_text">Neo</div> </div> </div> </div>