Is it possible to align a row so that it is centered based on one of the columns in the row?

Question

Is it possible to align a row so that it is centered based on one of the columns in the row?

Calling all experts in CSS and HTML: Let's say I have 3 columns in a row, each with a different size (refer to the image).

Now, picture this - I want to center the 2nd column right in the middle of my page.

If I simply use justify-content: center to center the content of the entire row, it would center the whole row as shown below.

But here's the challenge: how do I only center the 2nd column on the page, essentially basing the row's alignment on just one column while keeping them all in a row?

Is there a way to achieve this? Appreciate your insights.

Note: Please refrain from suggesting obvious solutions like "add margin-left to the row." The solution should be adaptable and responsive.

<!-- Code using bootstrap v15 classes -->

<div class="row w-100">
    <div class="col-2 purple-bg">
        <span>1st column</span>
    </div>

    <div class="col-4 green-bg">
        <span>2nd column</span>
        <b class="d-block">I want this column to be centered in the page</b>
    </div>

    <div class="col-6 red-bg">
        <span>3rd column</span>
    </div>
</div>

https://i.sstatic.net/M2HHx.jpg

html css angular bootstrap-5

Answer 1

Answer №1

Utilizing grids can be very effective in this scenario. By creating 3 columns and placing the left element in the first column, the right element in the third column, and the centered element in the middle column, you can then align the first column element to the right.

.container{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr;
}

.col1{
    background-color: purple;
    width: 70px;
    grid-column: 1;
    justify-self: right;
}

.col2{
    background-color: green;
    width: 50px;
    grid-column: 2;
}

.col3{
    background-color: red;
    width: 90px;
    grid-column: 3;
}

.col{
    height: 20px;
    grid-row: 1;
}

/* Page setup */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.vert{
    position: absolute;
    left: 50%;
    right: 50%;
    background-color: blue;
    height: 100vh;
    width: 1px;
    z-index: 10;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}

<body>
    <div class="vert"></div>
    <div class="container">
        <div class="col col1"></div>
        <div class="col col2"></div>
        <div class="col col3"></div>
    </div>
</body>

Answer 2

Utilizing grids can be very effective in this scenario. By creating 3 columns and placing the left element in the first column, the right element in the third column, and the centered element in the middle column, you can then align the first column element to the right.

.container{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr;
}

.col1{
    background-color: purple;
    width: 70px;
    grid-column: 1;
    justify-self: right;
}

.col2{
    background-color: green;
    width: 50px;
    grid-column: 2;
}

.col3{
    background-color: red;
    width: 90px;
    grid-column: 3;
}

.col{
    height: 20px;
    grid-row: 1;
}

/* Page setup */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.vert{
    position: absolute;
    left: 50%;
    right: 50%;
    background-color: blue;
    height: 100vh;
    width: 1px;
    z-index: 10;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}

<body>
    <div class="vert"></div>
    <div class="container">
        <div class="col col1"></div>
        <div class="col col2"></div>
        <div class="col col3"></div>
    </div>
</body>

Is it possible to align a row so that it is centered based on one of the columns in the row?

Answer №1

Similar questions

Adjust the colors of two elements by clicking a button's onclick event

Dots are used to indicate overflow of title in React Material UI CardHeader

Applying Validators manually in Angular 2 beta 17

Troubleshooting: Datepicker not appearing in Bootstrap

Arranging divs within list items in a single row

Having trouble getting the CSS 3 Spin feature to work?

Tips for accessing the @keyframes selector and extracting the value from it

Unable to pass a parameter through an Angular http.get request

The display of the AngularJS {{variable}} is not supported within a script tag

Retrieve ag grid from TypeScript file

The protractor-jasmine2-screenshot-reporter seems to be failing to generate the necessary screenshots within the designated folder

Is there a way to display shortened text only when hovering without altering the height of the list box?

Incorrect implementation of Bootstrap CSS in Jade template

Sequence of HTML elements arranged in a stack

Sending jQuery events from an aspx page to an ascx control

I possess legacy Angular 1 code in which I implemented div styles. How can I replicate the same functionality in Angular 11?

Having trouble locating the Xpath for the download link, it appears to be listed as a list item (li). I've attempted using the Contains function without success. Any assistance would be

Converting an empty response to JSON in Angular2's Http module

What is the best way to access the inner html of every cell within a table row that I have selected?

Bootstrap - the input group button is designed to align to the right side