Position the center button evenly between two images, aligned vertically using percentages

Question

Position the center button evenly between two images, aligned vertically using percentages

I'm attempting to achieve a specific layout that includes images scaling across Bootstrap breakpoints and a static button position. The challenge is maintaining the layout as depicted in the mockup, regardless of image size.

The images are set to img-fluid for responsiveness.
The button does not need to scale and should remain fixed in its position.

Despite trying various methods like using absolute positioning for the button within the first column, I couldn't achieve the desired outcome.

I am open to alternative approaches as long as the content remains within a single row. This is just one of my attempts.

Here are some of my attempted solutions:

Initial layout without the button:

<div class="row py-3">
    <div class="col">
        <img src="https://fakeimg.pl/693x678" class="img-fluid">
    </div>
    <div class="col">
        <img src="https://fakeimg.pl/693x678" class="img-fluid">
    </div>
</div>

Attempt 1:

<div class="row py-3">
    <div style="position: absolute" class="text-center h-auto" style="position: absolute; left: 0; right: 0;">
        <a class="btn btn-success text-white px-5">Hi guys</a>
    </div>
    <div class="col">
        <div class="w-100">
            <img src="https://fakeimg.pl/693x678" class="img-fluid mr-3">
            <img src="https://fakeimg.pl/693x678" class="img-fluid ml-3">
        </div>
    </div>
</div>

Attempt 2:

<div class="row py-3">
    <div class="col">
        <a class="btn btn-success text-white px-5" style="position: absolute; left: 0; right: 0;">Hi guys</a>
        <img src="https://fakeimg.pl/693x678" class="img-fluid">
    </div>
    <div class="col">
        <img src="https://fakeimg.pl/693x678" class="img-fluid">
    </div>
</div>

Various other attempts were made...

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

Looks something like this

.container {
  position: relative;
}

a {
  position: absolute;
  bottom: 15%;
  left: 40%;
  transform: translateX(-50%);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
      <img src="https://fakeimg.pl/693x678" class="img-fluid">
  </div>
  <div class="row">
    <img src="https://fakeimg.pl/693x678" class="img-fluid">
  </div>
  <a class="btn btn-primary text-white px-5">Hello everyone</a>
</div>

Answer 2

Looks something like this

.container {
  position: relative;
}

a {
  position: absolute;
  bottom: 15%;
  left: 40%;
  transform: translateX(-50%);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
      <img src="https://fakeimg.pl/693x678" class="img-fluid">
  </div>
  <div class="row">
    <img src="https://fakeimg.pl/693x678" class="img-fluid">
  </div>
  <a class="btn btn-primary text-white px-5">Hello everyone</a>
</div>

Answer 3

Answer №2

Here is an example of HTML and CSS code:

<div class="row another-row">
  <div class="col">...</div>
  <div class="col">...</div>
  <a class="button another-button"></a>
</div>

The corresponding CSS styling:

.another-row {
  position: relative;
}

.another-button {
  position: absolute;
  bottom: 30px;
  margin: 0 auto;
}

Answer 4

Here is an example of HTML and CSS code:

<div class="row another-row">
  <div class="col">...</div>
  <div class="col">...</div>
  <a class="button another-button"></a>
</div>

The corresponding CSS styling:

.another-row {
  position: relative;
}

.another-button {
  position: absolute;
  bottom: 30px;
  margin: 0 auto;
}

Answer 5

Answer №3

When placing a button within the first column, you can easily center it between two columns by using the formula parentWidth - 0.5 * buttonWidth. By combining the properties left and transform, you can achieve this effect:

For example:

document.querySelector(".btn").addEventListener("click", function () {
  [].forEach.call(document.querySelectorAll("img"), function (img) {
    img.src = "https://placehold.it/693x500";
  });
});

body {
  overflow-x: hidden;
}

.btn {
  position: absolute;
  left: 100%;
  transform: translateX(-50%);
  z-index: 2;
  bottom: 15%;
}

<link type = "text/css" rel = "stylesheet" href = "https://cutt.ly/Twe8un2"/>

<div class = "row">
  <div class = "col">
    <img src = "https://placehold.it/693x300" class = "img-fluid">
    <a class = "btn btn-danger text-white">Custom Button</a>
  </div>
  <div class = "col">
    <img src = "https://placehold.it/693x300" class = "img-fluid">
  </div>
</div>

Answer 6

When placing a button within the first column, you can easily center it between two columns by using the formula parentWidth - 0.5 * buttonWidth. By combining the properties left and transform, you can achieve this effect:

For example:

document.querySelector(".btn").addEventListener("click", function () {
  [].forEach.call(document.querySelectorAll("img"), function (img) {
    img.src = "https://placehold.it/693x500";
  });
});

body {
  overflow-x: hidden;
}

.btn {
  position: absolute;
  left: 100%;
  transform: translateX(-50%);
  z-index: 2;
  bottom: 15%;
}

<link type = "text/css" rel = "stylesheet" href = "https://cutt.ly/Twe8un2"/>

<div class = "row">
  <div class = "col">
    <img src = "https://placehold.it/693x300" class = "img-fluid">
    <a class = "btn btn-danger text-white">Custom Button</a>
  </div>
  <div class = "col">
    <img src = "https://placehold.it/693x300" class = "img-fluid">
  </div>
</div>

Answer 7

Answer №4

Check it out here - I created a pen using a grid layout to mimic your mockup design.

I opted for Grid because it simplifies stacking elements and structuring a 2D layout.

.grid-container {
    display: grid;
    grid-template-rows : min-content 150px 20%;
    grid-template-columns : 45% 5% 5% 45%;
    justify-items: center;
    align-items: center;
    width: max-content;
    height: max-content;
 }

The images occupy only one row each, but to align the button as needed, I allocated 3 rows. The 150px row specifically serves as space for the button. To position the images, they span across all 3 rows.
In terms of columns, since I wanted the button centered above the images, I created 4 columns. Each image spans the outer 2 columns, while the button occupies the inner 2 columns.

 .img1 {
   grid-row: 1/4;
   grid-column: 1/3;
 }

 .img2 {
   grid-row: 1/4;
   grid-column: 3/5;
 }

 .button1 {
   grid-row: 2/3;
   grid-column: 2/4;
 }

You have the flexibility to adjust the percentages and sizes to better suit your requirements.

Note : In this example, the row you referred to would represent the grid container.

Answer 8

Check it out here - I created a pen using a grid layout to mimic your mockup design.

I opted for Grid because it simplifies stacking elements and structuring a 2D layout.

.grid-container {
    display: grid;
    grid-template-rows : min-content 150px 20%;
    grid-template-columns : 45% 5% 5% 45%;
    justify-items: center;
    align-items: center;
    width: max-content;
    height: max-content;
 }

The images occupy only one row each, but to align the button as needed, I allocated 3 rows. The 150px row specifically serves as space for the button. To position the images, they span across all 3 rows.
In terms of columns, since I wanted the button centered above the images, I created 4 columns. Each image spans the outer 2 columns, while the button occupies the inner 2 columns.

 .img1 {
   grid-row: 1/4;
   grid-column: 1/3;
 }

 .img2 {
   grid-row: 1/4;
   grid-column: 3/5;
 }

 .button1 {
   grid-row: 2/3;
   grid-column: 2/4;
 }

You have the flexibility to adjust the percentages and sizes to better suit your requirements.

Note : In this example, the row you referred to would represent the grid container.

Position the center button evenly between two images, aligned vertically using percentages

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Learn how to showcase real-time stock information from Yahoo Finance on an Android device. See the JSON format provided below for guidance

Passing a variable to the render method in a PDF document

Can you explain the significance of the '#' symbol within the input tag?

Unable to transmit HTML emails

Effortlessly retrieving the id attribute from an HTML tag using jQuery

The issue is that only the first checkbox within ngFor is being toggled on and off each time a different checkbox is clicked

Automatically generating new lines of grid-template-columns with CSS grid

How can I apply borders to individual columns within a Bootstrap table without affecting the rows?

Using Bootstrap to handle opening a link when a dropdown menu button is clicked

Pull in content or data from a separate page by leveraging AJAX

Unable to Utilize Custom Colors in Tailwind CSS within NextJS

The feature of Google street view is not supported within the tabs on WordPress

Counting Numbers with jQuery Animation from Zero to Percentage Value

The issue of the highlighted row not disappearing persists even after clicking on the adjacent table row

"Exclusive Mui sx styles will be applied only when a specific breakpoint

Drawing the canvas is taking place prior to the image being fully loaded in JavaScript

I need help figuring out how to get a horizontal scrollbar positioned at the top of a div to function properly once the content has been loaded using ajax

Avoiding leaps through the use of dynamic pictures?

Remove HTML tags from a table cell containing a combination of radio buttons and labels

The React modal refuses to disappear, stubbornly clinging to the original component it sprang from