Question 66355 in Html Question posted in
Some basic documentation can be found here.

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

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>
Tags:

3

Answers


  1. 0

    Here’s one (very basic) solution; just make each box fill a fixed percentage of the page. Although I’d probably go with a flex box approach myself. Just another option…

    .box1 {
  float: left;
  width: 33%;
  text-align: center;
  background: red;
}

.box2 {
  float: left;
  width: 34%;
  text-align: center;
  background: blue;
}

.box3 {
  float: right;
  width: 33%;
  text-align: center;
  background: red;
}
    <div class="box1">
  1
</div>

<div class="box2">
    2
</div>

<div class="box3">
  3
</div>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search