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

Question

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

我一直在尝试一些东西，比如我目前正在使用的“d-flex justify-content-center”，或者让“div1”成为一行并给“div3”class“ml -auto”，但我不知道如何将“div1”对齐到中心。

我正在使用 Bootstrap 5.

My actual result

<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

此解决方案应该可以帮助您：

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>

Answer 2

一种方法是使用嵌套的 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>

dead center using flexbox nesting

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

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

dead center using absolute position

阅读更多：

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

Align center a div and align right another div in the same row

html

twitter-bootstrap

alignment

bootstrap-5