HTML & CSS, how to center 3 divs inside a div?-CodePudding

I am trying to position 3 div in the center of another div but I'm having issues with the positioning. I tried using verticle-align, and negative margins but nothing seems to be working.

.float-container {
  border: 3px solid red;
  padding: 250px;
  position: relative;
  background-color: lightblue;
}

.float-child {
    width: 150px;
    height: 150px;
    float: left;
    padding: 10px;
    border: 2px solid red;
    margin: 30px;
    vertical-align: middle;  
}

<div >

  <div >
    <div>Float Column 1</div>
  </div>
  
  <div >
    <div>Float Column 2</div>
  </div>

    <div >
    <div>Float Column 3</div>
  </div>
  
  </div>

CodePudding user response：

  
  .float-container {
    border: 3px solid red;
    padding: 20px;
    background-color: lightblue;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }
  
  .float-child {
    width: 150px;
    height: 150px;
    padding: 10px;
    border: 2px solid red;
  }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

    <link rel="stylesheet" href="./index.css">
</head>
<body>

    <div >

        <div >
          <div>Float Column 1</div>
        </div>
        
        <div >
          <div>Float Column 2</div>
        </div>
      
          <div >
          <div>Float Column 3</div>
        </div>
        

</div>
   
</body>
</html>

CodePudding user response：

An easy and modern way is to use Flexbox, like so:

.float-container {
  border: 3px solid red;
  padding: 20px;
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.float-child {
  width: 150px;
  height: 150px;
  padding: 10px;
  border: 2px solid red;
}

<div >

  <div >
    Float Column 1
  </div>

  <div >
    Float Column 2
  </div>

  <div >
    Float Column 3
  </div>

</div>

CodePudding user response：

example for my comment

vertical alignment is not avalaible for floatting elements. Nowdays, for this kind of layout, grid or flex are efficient, flexible and easy to put in action. This is not a float job ;)

.float-container {
  border: 3px solid red;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  min-height:500px;
  position: relative;
  background-color: lightblue;
}

.float-child {
    width: 150px;
    height: 150px;
 
    padding: 10px;
    border: 2px solid red;
  
}

<div >

  <div >
    <div>Float Column 1</div>
  </div>
  
  <div >
    <div>Float Column 2</div>
  </div>

    <div >
    <div>Float Column 3</div>
  </div>
  
  </div>

children only need now to be sized . alignement gap in between them is set from the flex parent. A min-height is given (500px inspirated from your padding 250px)

CodePudding user response：

Remove the float: left; and in its place add display: flex;, justify-content: center;, align-items: center;, flex-direction: row;. For requirements like these, flex and grid are usually much simpler to implement.

CodePudding user response：

.float-container {
  display: flex;
  padding: 250px;
  position: relative;
  align-items: center;
  border: 3px solid red;
  justify-content: center;
  background-color: lightblue;
}

.float-child {
    width: 150px;
    height: 150px;
    padding: 10px;
    border: 2px solid red;
    margin: 0 10px;
    vertical-align: middle;  
}

 <div >

    <div >
      <div>Float Column 1</div>
    </div>
    
    <div >
      <div>Float Column 2</div>
    </div>
  
      <div >
      <div>Float Column 3</div>
    </div>
    
    </div>