将一个div居中对齐，并将同一行中的另一个div向右对齐

Question

我有3个div，我想对齐"div2"；到页面的中心；div3"；在同一行的末尾。

我一直在尝试一些东西，比如"；d-flex调整内容中心"；我目前正在使用或制作"；div1"；一行并给出"；div3"；类"；ml auto"；但我不知道如何对齐"；div1"；到中心。

我正在使用Bootstrap 5。

我的实际结果

<div class="text-center mt-2" id="div1">
<div class="d-flex justify-content-center" id="div2">
<a class="btn btn-lg btn-success" href="#"> Link 1 </a>
</div>
<div class="d-flex justify-content-end" id="div3">
<a class="btn btn-lg btn-info" href="#"> Link 2 </a>
<a class="btn btn-lg btn-info" href="#"> Link 3 </a>
</div>
</div>

Answer 1

一种方法是使用嵌套的flexbox项。为此，左侧需要一个空的间隔符，每个子项都需要flex: 1:

.flex1 {
flex: 1;
}

<div class="text-center mt-2 d-flex w-100" id="div1">
<div class="d-flex flex1"><!--spacer --></div>
<div class="d-flex flex1 justify-content-center" id="div2">
<a class="btn btn-lg btn-success" href="#"> Link 1 </a>
</div>
<div class="d-flex flex1 justify-content-end" id="div3">
<a class="btn btn-lg btn-info" href="#"> Link 2 </a>
<a class="btn btn-lg btn-info" href="#"> Link 3 </a>
</div>
</div>

使用flexbox嵌套的死点

---

另一种方法是使用绝对位置：

<div class="text-center mt-2 d-flex justify-content-center" id="div1">
<div class="d-flex" id="div2">
<a class="btn btn-lg btn-success" href="#"> Link 1 </a>
</div>
<div class="ms-auto position-absolute end-0" id="div3">
<a class="btn btn-lg btn-info" href="#"> Link 2 </a>
<a class="btn btn-lg btn-info" href="#"> Link 3 </a>
</div>
</div>

使用绝对位置的死点

阅读更多：调整柔盒项目在这里解释

Answer 2

此解决方案应能帮助您：

• div2位于行的中心
• div3在行的末尾

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-end" id="div1">         
<div  id="div2" class="position-absolute" style="left:50%;width:100px;margin-left:-50px">
<a class="btn btn-lg btn-success" href="#"> Link 1 </a>
</div>
<div  id="div3">
<a class="btn btn-lg btn-info" href="#"> Link 2 </a>
<a class="btn btn-lg btn-info" href="#"> Link 3 </a>
</div>
</div>