Align button groups some to the left and some to the right-CodePudding

How can I align button groups, 3 buttons to the left and another 3 buttons to the right with an input field in the middle in a div.

<div >
  <div>
    <div >
      <button type="button" ></button>
      <button type="button" ></button>
      <button type="button" ></button>
    </div>
  </div>

  <div>
    <input type="text" name="textfield" value="">
  </div>

  <div>
    <div >
      <button type="button" ></button>
      <button type="button" ></button>
      <button type="button" ></button>
    </div>
  </div>
</div>

CodePudding user response：

Flexbox solves your requirement. Learn more here

.container{
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.button-group{
display:flex;
}

<div >
  <div>
    <div >
      <button type="button" ></button>
      <button type="button" ></button>
      <button type="button" ></button>
    </div>
  </div>

  <div>
    <input type="text" name="textfield" value="">
  </div>

  <div>
    <div >
      <button type="button" ></button>
      <button type="button" ></button>
      <button type="button" ></button>
    </div>
  </div>
</div>

CodePudding user response：

Like this?

.center{
  text-align: center;
}
.right{
  text-align: right;
}

<div >
  <div>
    <div >
      <button type="button" ></button>
      <button type="button" ></button>
      <button type="button" ></button>
    </div>
  </div>

  <div >
    <input type="text" name="textfield" value="">
  </div>

  <div>
    <div >
      <button type="button" ></button>
      <button type="button" ></button>
      <button type="button" ></button>
    </div>
  </div>
</div>

Or do you mean like this? Source: (Making a flex item float right)

.button-container{
  display: flex;
}
.right{
  margin-left: auto;
}
.center{
  text-align: center;
}

<div >
  <div >
    <div >
      <button type="button" ></button>
      <button type="button" ></button>
      <button type="button" ></button>
    </div>
    <div >
      <button type="button" ></button>
      <button type="button" ></button>
      <button type="button" ></button>
    </div>
  </div>

  <div >
    <input type="text" name="textfield" value="">
  </div>
  
</div>