css 如何使三个东西保持在同一条线上，中间的东西居中？[副本]

7qhs6swi 于 2023-05-02 发布在其他

关注(0)|答案(2)|浏览(177)

此问题已在此处有答案：

Align 3 unequal blocks left, center and right（4个答案）
5天前关闭。
我在同一行上用div和CSS float左和右做了三个东西。但是中间的东西没有居中，也不够宽。我如何使中间的东西居中？编辑：谢谢大家帮助我。我很感激

.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>

css

来源：https://stackoverflow.com/questions/76113790/how-to-make-3-things-stay-on-the-same-line-with-the-middle-thing-centered

2条答案

按热度按时间

bqjvbblv1#

您可以将display:flex属性并排用于design项。对于table，可以使用tr td th元素。另外，我使用了justify-content:start-center-end属性。最后，您应该为box类给予width:auto值

.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>

赞(0）回复(0）举报 2023-05-02

li9yvcax2#

您可以在div容器中使用display: flex;和justify-content: space-between;来实现这一点。
也许这可以帮助你：

.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>

赞(0）回复(0）举报 2023-05-02

我来回答

css 如何使三个东西保持在同一条线上，中间的东西居中？[副本]

2条答案

相关问题

热门标签

最新问答