Tips for aligning a button in the center of an image across different screen sizes using CSS or bootstrap

I currently have a centered button on my hero image, but the issue is that I would need to use multiple media queries to ensure it stays centered on all screen sizes.

<style>

 .hero-container{
  position: relative;
  text-align: center;
 }

  .hero-btn-div{
   position: absolute;
   top: 50%;
   left: 42%;
   display: inline-block;
  }

 .hero-btn{
  background-color: transparent;
  font: var(--main-sans-serif);
  font-size: 1.2em;
  border: 1px solid black;
  border-radius: 100px;
  width: 300px;
  height: 50px;
 }

</style>

<div class="hero-container">
  <img src="images/dream%20of%20winter%20cut.jpg" class="img-fluid" width="1920px" alt="Artwork">

  <div class="hero-btn-div"><a href="#"><button class="hero-btn">Button</button></a></div>
</div>
htmlcssbootstrap-5

Answer №1

Make sure to modify the left:50% property and include transform:translateX(-50%);

 <style>
  .hero-container {
    position: relative;
    text-align: center;
  }

  .hero-btn-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translateX(-50%);
    display: inline-block;
  }

  .hero-btn {
    background-color: transparent;
    font: var(--main-sans-serif);
    font-size: 1.2em;
    border: 1px solid black;
    border-radius: 100px;
    width: 300px;
    height: 50px;
  }
</style>

<div class="hero-container">
  <img src="images/dream%20of%20winter%20cut.jpg" class="img-fluid" width="1920px" alt="Artwork">

  <div class="hero-btn-div"><a href="#"><button class="hero-btn">Button</button></a></div>
</div>

Answer №2

It's a bit challenging to understand your goal without sight of the image or knowing the purpose of the .img-fluid class. However, if content centering is your main concern, consider exploring the "display: flex" property (for more details, check this resource). Additionally, you might find this tool useful.

To keep the button centered, you can experiment with this solution:

.hero-container{
      display: flex;
      justify-content: center;
      position: relative;
    }

    .hero-btn-div{
      position: absolute;
    }

    .hero-btn{
      background-color: transparent;
      font: var(--main-sans-serif);
      font-size: 1.2em;
      border: 1px solid black;
      border-radius: 100px;
      width: 300px;
      height: 50px;
    }
<div class="hero-container">
      <img src="images/dream%20of%20winter%20cut.jpg" class="img-fluid" width="1920px" alt="Artwork">

      <div class="hero-btn-div">
        <a href="#">
          <button class="hero-btn">Button</button>
        </a>
      </div>
    </div>

Answer №3

To make the button stretch to the full size of its container and center it using display: flex, remember to also include pointer-events.

.container {
    position: relative;
 }

 .button-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
 }

 .button {
    background-color: transparent;
    font: var(--main-sans-serif);
    font-size: 1.2em;
    border: 1px solid black;
    border-radius: 100px;
    width: 300px;
    height: 50px;
    pointer-events: auto;
 }

Answer №4

One effective approach is utilizing Bootstrap's flexbox classes...

<div class="hero-container">
    <img src="..." class="img-fluid" width="1920px" alt="Artwork">
    <div class="hero-btn-div d-flex align-items-center justify-content-center"><a href="#"><button class="hero-btn">Button</button></a></div>
</div>

Utilizing a full-size absolute container...

 .hero-btn-div {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
 }

View the responsive demo here

Answer №5

One way to tackle this issue is by setting an image as a CSS background-image property within the container div, and then using flexbox to center the button.

Alternatively, you can position the image absolutely inside the container div and then center the button with flexbox like so:

.hero-container {
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  overflow: hidden;
}

.hero-container .bg-img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.hero-btn {
  position: relative;
  background-color: transparent;
  font: var(--main-sans-serif);
  font-size: 1.2em;
  border: 1px solid black;
  border-radius: 100px;
  width: 300px;
  height: 50px;
}
<div class="hero-container">
  <div class="bg-img">
    <img src="https://picsum.photos/200/300" class="img-fluid" width="100%" alt="Artwork">
  </div>

  <div class="hero-btn-div">
    <a href="#">
      <button class="hero-btn">Button</button>
    </a>
  </div>
</div>

Note: Avoid using fixed sizes like 1920px if you want your webpage to be responsive.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determining the measurements of an svg path without relying on the bounding box

Is there a way to retrieve the dimensions of an svg path and showcase it within a div without relying on the bounding box method? I've noticed that the bounding box can be buggy in Webkit especially with bezier curves. Just so you know, I am currently ...

javascripthtmlsvgjquery-svglibrsvg

Update picture using Vanilla Javascript for mobile display

I am looking to change my logo color to white when viewed on mobile devices. Currently, I have the following code for changing the logo on scroll using vanilla JavaScript. The code toggles between a dark and light logo based on the scroll position. Howev ...

javascripthtml

increasing the size of the drop-down menu width

I have been struggling to adjust the width of my dropdown list box on my page. Despite my efforts, I cannot seem to make it bigger. Here is the code snippet causing me trouble: <div class="form-group row"> <div class="col-sm-1&quo ...

cssasp.netbootstrap-4

Stylish Dropdown Menu with Regular Buttons

Currently, all buttons have a hovering effect, but I only want one button to behave this way. I need two buttons to immediately redirect to another page upon clicking, without any hover effect. The CSS styling code has been provided below: #wrapper { ...

css

The POST method is failing to collect data from the form

Currently in the process of learning Web Design with HTML, PHP, and Javascript, I have taken on the challenge of creating my own website called MySite.html. Within this site, there is a sign-in screen that utilizes the POST method to send data to a file na ...

phphtmlforms

How can I replay an HTML audio element?

I created an HTML5 page with an audio element for playing music in mp3 format. However, when the music plays to the end, it stops and I'm using JavaScript to control the audio element. Even so, I can't seem to replay it, only stop it. Is there a ...

javascripthtmlhtml5-audio

What is the best way to fit the text into a DIV row as efficiently as possible?

Looking for a solution to prevent a span from dropping down to the next line when text is too long within a fixed width and height row. The row consists of three elements, two with fixed widths and the third containing a span and text. Constraints include ...

htmlcss

I am facing an issue with the asynchronous function as it is displaying an error message

**I am facing an issue with displaying categories. I have attempted to do this using async function, however the data is not showing up** <div class="form-group"> <label for="category">Category</label> <select id="categor ...

htmlangulartypescript

Transferring a PHP session variable to JavaScript in a separate file

I successfully imported data from a CSV file into PHP and organized it into a nested array. To ensure the data is easily accessible across different files, I stored the array as a session variable. Now, the challenge lies in accessing this session variable ...

javascriptphphtmlsession

Creating a dynamic word cloud in D3: Learn how to automatically adjust font sizes to prevent overflow and scale words to fit any screen size

I am currently utilizing Jason Davies' d3-cloud.js to create my word cloud, you can view it here 1. I'm encountering an issue where the words run out of space when the initial window size is too small. To address this, I have a function that cal ...

javascriptcssangularjsd3.jsword-cloud

Mastering the Art of Utilizing content_for and Rendering Partials in Rails 4

Recently, I discovered the power of utilizing content_for and found it to be incredibly useful. It may seem like I am making things more complicated than necessary, but my objective is: To create a custom header for the products#index page. As of now, I ...

cssruby-on-railsrendering

Inequality in spacing between Bootstrap columns

I am currently working on a website where the home page has columns with icons and text. The issue arises on mobile devices as the columns stack unevenly due to varying text lengths, resulting in inconsistent vertical spacing. Is there a way to ensure cons ...

cssbootstrap-4

A slender gap of white space delicately separates the transformed parent from its offspring

When trying to align a parent div with a child div that has the same background-color as the parent's border-color, I am encountering an issue. Despite my efforts, there seems to be a thin line of whitespace separating the two divs. It is worth notin ...

css

Utilizing drop-down pagination with Jquery

<select multiple> <option></option> <option>a1</option> <option>b1</option> <option>c1</option> <option>d1</option> . . . . . <option>u100</option> < ...

jqueryhtml

Ways to create gaps between rows of a table

I have been attempting to replicate the layout of this table: https://i.sstatic.net/1QuFD.png However, I am running into an issue with the spacing between the rows (border-spacing: 0 2px), and I'm not sure why. Can anyone provide any guidance on thi ...

css

When the LI element is clicked, it triggers the display of another LI element without affecting the rest of the

New to the web development scene and trying to figure out how to create a collapsible text feature using HTML, JavaScript, and JQuery. I've got the styling down but struggling with the scripting part. Here's an example of what I'm trying to ...

javascriptjquerycsshtml

Position a div container to be aligned at the bottom of an image

I'm having trouble aligning a div container at the bottom of an image. I attempted to modify the position attribute of the image and set its value to "relative." It's a bit challenging to explain, but here are snippets of HTML and CSS code with ...

htmlcss

What is the best way to integrate Bootstrap 5 with Next.js?

After adding Bootstrap to my project with npm install bootstrap, I included the style in /pages/_app.js like this: import 'bootstrap/dist/css/bootstrap.css'; export default function App({ Component, pageProps }) { return <Component {...pag ...

javascriptnode.jsreactjsnext.jsbootstrap-5

Switch out either even or odd divs within a container

I need help figuring out how to alternate the background colors of divs within a container. I want the first one to have a red background, the second to have blue, the third red again, and so on... Here is the code I currently have: <div>...</di ...

jquerycss

Can the HTML attributes produced by AngularJS be concealed from view?

Is there a way to hide the Angular-generated attributes such as ng-app and ng-init in the HTML code that is output? I want to present a cleaner version of the HTML to the user. Currently, I am using ng-init to populate data received from the server, but ...

javascripthtmlangularjs