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

Question

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>

Do you want to use float? That is, is there a requirement for text for example to wrap around the left and right divs, or is it always the case that you basically want 3 columns, albeit with the center one centered on the parent element and not evenly spaced from the other two elements? — A Haworth, Apr 26 '23 at 18:28

webworm84 · Accepted Answer · 2023-04-26T18:32:42.707

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>

score 0 · Answer 2 · answered Apr 26 '23 at 18:33

You can do that with display: flex; and justify-content: space-between; in a div container.

Maybe this can help you:

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

.box2 {
    background-color: green;
    width: 50%;
}

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

      <p>hello</p>

    </div>

    <div class="box2">

      <table>

      </table>

    </div>

    <div class="box3">

      <p>Hello again</p>

    </div>
</div>

This doesn't center the central element, it puts equal space between it and the left and right elements. — A Haworth, Apr 26 '23 at 18:46

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

2 Answers2