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

【问题标题】：Align center a div and align right another div in the same row将一个 div 居中对齐，并将同一行中的另一个 div 右对齐
【发布时间】：2021-12-18 13:36:01
【问题描述】：

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

我一直在尝试一些东西，比如我目前正在使用的“d-flex justify-content-center”，或者将“div1”排成一行并给“div3”类“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>

【问题讨论】：

标签： html twitter-bootstrap alignment bootstrap-5

【解决方案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>

【讨论】：

我试过了，它和我想要的非常接近，但是“div2”不在页面的中心，它在两个 div 之间，右边的比左边的大，这使得“div2”略微向左，我将编辑我的问题以指定，这是我的错。
现在你有了更新的版本。
魅力十足！谢谢！

【解决方案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

【讨论】：

第一个选项非常适合我！我也尝试了第二个，但“div3”出现在“div2”上方，我不明白为什么，但我会检查您发布的最后一个链接以更好地理解它。谢谢！