How to make 3 things stay on the same line with the middle thing centered?

April 26, 2023

I made three things on the same line with divs and CSS float left and right. But the thing in the middle is not centered and it’s not wide enough. How do I make the middle thing centered?
Edit: Thankyou all for helping me. I appreciated

.box1 {
  float: left;
}

.box2 {
  float: left;
}

.box3 {
  float: right;
}

<div class="box1">
  <p>hello</p>
</div>
<div class="box2">
  <table>
  </table>
</div>
<div class="box3">
  <p>Hello again</p>
</div>

>Solution :

You can use display:flex attribute for design items side by side. And for table you can use tr td th elements . Additionally you i used justify-content:start-center-end attributes Finally You should give width:auto value to the box classes

.box1 {
display:flex;
justify-content:start;
width:auto;
}

.box2 {
width:auto;
display:flex;
justify-content:center;
}

.box3 {
 width:auto;
 display:flex;
 justify-content:end;
}

table, th, td {
 border:1px solid black;
}

.container {
 display:flex;
 justify-content:space-around;
}

<div class="container">
<div class="box1">

  <p>hello</p>

</div>

<div class="box2">
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>
</div>

<div class="box3">

  <p>Hello again</p>

</div>
</div>