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

I have 3 divs, I want to align “div2” to the center of the page and “div3” at the end while being in the same row.

I’ve been trying some things like the “d-flex justify-content-center” that I’m currently using or making “div1” a row and giving “div3” the class “ml-auto” but then I don’t know how to align “div1” to the center.

I’m using 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>

Contents hide

Answers:

Method 1

Method 2

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

One way is to use nested flexbox items. For this you’ll need an empty spacer for the left, and each child item needs 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

Another way is to use absolute position:

<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

Method 2

This solution should help you:

div2 is in the center of the row
div3 is at the end of the row

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="nofollow noreferrer noopener" 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="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"> Link 1 </a>
        </div>
        <div  id="div3">
            <a class="btn btn-lg btn-info" href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"> Link 2 </a>
            <a class="btn btn-lg btn-info" href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"> Link 3 </a>
        </div>
    </div>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating