Centering 4 div boxes horizontally

HTML & CSS
1

Im having a hard time figuring this out…it should be easy!

I have 4 divs I want to align next to each other and then center them. But on smaller screens I want them to be below each other and still be centered.

The divs will contain images 300px wide…with some margin inbetween the boxes.

How do I do this? Here is my current code.

 <div class="container">        
 <div class="row" style="width:100%;">
    <div class="col-md-offset-4 col-md-1">
        <div class="levels_box">
            <img src="../images/flip16.jpg">
        </div>     
    </div>
      
    <div class="col-md-1">
        <div class="levels_box">
            <img src="../images/flip15.jpg" alt="Avatar">
        </div>     
    </div>
      
    <div class="col-md-1">
      <div class="levels_box">
            <img src="../images/flip2.jpg" alt="Avatar" >
      </div>     
    </div>

    <div class="col-md-1">
        <div class="levels_box_r">
            <img src="../images/flip17.jpg" alt="Avatar">
        </div>     
    </div>          
      
   </div> <!---End of row------->
   </div>    <!---End of container------->
2

It looks as though you’re using Bootstrap; is that right?

3

yes bootstrap - but im not sure if this is the best way. Im trying to use it to make it mobile friendly

4

Hi there henk3,

here is one possible solution for you to try…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
html {
    box-sizing: border-box;
 }

*, *::before, *::after {
    box-sizing: inherit;
 }

body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 77em;
    padding: 0;
    margin: 0 auto;
    list-style: none;
 }

img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 18.75em;
    margin: 0.25em;
    border: 1px solid #666;
    border-radius: 0.5em;
    box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.3 );
 }

@media ( max-width: 78em ) {
ul {
    max-width: 38.5em;
  }
 }

@media ( max-width: 38.5em ) {
ul {
    max-width: 19.25em;
  }
 }

@media ( max-width: 21em ) {
ul {
    max-width: 15em;
  }
 }
</style>

</head>

<body> 
 <ul>
  <li><img src="https://via.placeholder.com/300x186" width="300" height="186" alt=""></li>
  <li><img src="https://via.placeholder.com/300x186" width="300" height="186" alt=""></li>
  <li><img src="https://via.placeholder.com/300x186" width="300" height="186" alt=""></li>
  <li><img src="https://via.placeholder.com/300x186" width="300" height="186" alt=""></li>
 </ul>

</body>
</html>

coothead

2 Likes
5

Thank you - I managed to modify the code and make it work!

6

 
 
        No problem, you’re very welcome. :winky:
 
 
        coothead

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.