Aligning object in middle of a responsive image using Bootstrap

I'm having trouble centering a button on an image using responsive design techniques. I am currently utilizing Bootstrap 3 and have attempted to use CSS margin properties to center the button, but this method is not ideal especially on smaller screens.

Below is my current CSS code:


    .gallery-list > li .gallery-thumbnail i{
      top: 80px;
      color: red;
      opacity: 0;
      position: absolute;
      font-size: 50px; 
      display:block;
      margin-left: 120px;
      background-color: transparent;
      transition: all 0.3s;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;    
    }

    .gallery-list > li:hover .gallery-thumbnail i{
      opacity: 1;
      transition: all 0.3s;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;  
    }

Display on large screens:

Display on small screens:

My question is, how can I center the button regardless of the device viewport size?

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

The reason for this is because your margin is not being responsive. It currently uses absolute values, it's preferable to use:

 margin-left: auto;
 margin-right: auto;

Answer №2

To achieve centered alignment in your layout, consider using the helpful Bootstrap class center-block

http://getbootstrap.com/css/#helper-classes-center

Alternatively, you can simply apply the following CSS properties:

margin-left:auto; 
margin-right:auto;

Answer №3

When adding 

margin-left: auto;
margin-right: auto;

doesn't fix the issue since the element is positioned absolutely. Give this code a try instead:

.gallery-list > li  .gallery-thumbnail {
    position: relative;
    display: block;
}
.gallery-list > li  .gallery-thumbnail i {
    position: absolute;
    top: 50%;
    margin-top: -25px; /* half of your icon's height */
    left: 50%;
    margin-left: -21px; /* half of your icon's width */
    font-size: 50px;
    color: red;
    opacity: 0;
    -webkit-transition: all 0.3s;
       -moz-transition: all 0.3s;  
            transition: all 0.3s;     
}
.gallery-list > li:hover  .gallery-thumbnail i{
    opacity: 1;
}

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

What is the best way to fetch and convert information from an API to display on a website?

I am encountering an issue while trying to retrieve data from an API. Below is my code with a fabricated access code. $(function () { var $data = ('#data'); $.ajax({ type: 'GET', url: 'http://api.openweathe ...

javascripthtmljqueryajaxapi

Need to swiftly modify values of css attributes?

Here is a snippet of the code I am working with: <div></div> <button> Go </button> div { width: 50px; height: 50px; border: 1px solid #ccc; } var bgs = ['red', 'blue', 'yellow', 'green&apo ...

javascriptjquerycss

Update the CSS styles using properties specified within an object

Is it possible to dynamically apply CSS styles stored in a JavaScript object to elements? For instance, can we change the width and background of a basic <div> element: <div id="box"></div> <button id="btn">click me</button> ...

javascripthtmlcss

I need to display 5 columns in a parent component, each with its own unique icon. How can I conditionally render them in a React component?

Creating a parent component to reuse multiple times can be very useful. In my case, I have included 5 different icons in each instance of the component, all taken from hero icons. I have set up an object with unique ids for each child component, but I am ...

javascriptcssreactjs

Identifying CSS div tags in CakePHP with unique class names

After running cake bake, a test installation was created resulting in the Product Controller and its associated views such as index.cpt, add.cpt, edit.ctp, etc. Upon inspecting the CSS file linked to these views, I noticed two specific divisions: action an ...

htmlcsscakephp

Checking boxes on Android for compatibility with Firefox, Chrome, and Internet Explorer 8

Could anyone assist me with finding Android checkboxes styled with CSS and/or jQuery for my project? I haven't been able to find any resources or plugins that could help. Any links you can provide would be greatly appreciated as I've come up empt ...

androidjqueryhtmlcsscheckbox

What sets bootstrap.min.js apart from bootstrap.bundle.min.js?

While browsing through the bootstrap download files, we discovered numerous files in the JS folder. One thing that I am curious about is whether it is required to use bootstrap.min.js along with bootstrap.bundle.min.js? ...

twitter-bootstrapbootstrap-4

The radio buttons fail to function properly or update when clicked

Seems like I am facing a strange issue....it seems simple (and trivial for some) but it just won't work. I have a basic div with some radio buttons that are not changing state when clicked... <div id="payments_tab" class="tab-pane fade" data- ...

htmltwitter-bootstrap-3radio-button

Shine a spotlight on elements that match with jQuery using live() or on()

Check out my jsFiddle demonstration where I have created a button that adds elements and provides links to delete these elements. Instead of actually deleting the elements in this example, I want to make it so that hovering over the (remove) link, which is ...

javascriptjqueryhtmlcss

Three brothers and sisters - One must expand responsively while the remaining two maintain minimum content sizes

Attempting to outline the limitations at hand. We have 3 containers named .content, .left, and .bottom, along with a resize handler that governs the available space. I aim for the .container to expand as the space increases, utilizing all available area. ...

css

What is the best way to align elements within a row/column layout in Angular Material when working with divs?

To set up two div blocks in a row, I'm utilizing the code below: <div layout="column" layout-gt-xs="row" layout-align="center center" id="row"> <div id="a">a</div> <div id="b">b</div> </div> The CSS for this ...

cssangularjsangular-material

Discovering the id of the current active tabpane is possible by using

Is there a way to retrieve the id of the currently active tab-pane every time I switch tabs on my page? Depending on which tab-pane is active (tab-pane1, tab-pane2, tab-pane3), I want to store the respective value (tab-pane1 = 1 and so on) in a variable an ...

javascripthtmljquerytabsbootstrap-5

Guide on moving the parent <div> at an angle within an AngularJS custom directive

The code snippet below demonstrates the functionality of dynamically generated ellipse elements as they change color based on an array. I have been experimenting with updating the style property of the parent div element within a custom directive. This in ...

htmlcssangularjsangularjs-directivedirective

The element remains stationary and does not shift positions

My form is not centralizing properly, it seems to be stuck to the left side of #wrapper. I've tried adjusting margin-top but it doesn't seem to affect its horizontal position at all. I've played around with different values for margin and ev ...

htmlcss

What is the best way to incorporate and organize the templateHyper folder within an established web project directory?

Can anyone offer advice on how to properly integrate and organize the 'templateHyper' (Bootstrap template) folder within my web project? I've been developing a project using C#, JavaScript, HTML, and Bootstrap's templateHyper. I'm ...

javascriptc#htmlbootstrap-5

Unexpected behavior with HTML Bootstrap's dl-horizontal layout

Despite having the div class "dl-horizontal" within the table, the dl-horizontal fields are displaying outside the table. Here is the code I used: <!DOCTYPE html> <html lang="en> <head> <title>Bootstrap Example</title> ...

htmlcssbootstrap-4

Checking links with AngularJS and HTML 5

Good day everyone: It seems like a simple question, but despite spending hours searching online, I am still unable to find the solution: how can an URL be validated with the inclusion of www without using http. Here's what I have tried so far: I a ...

htmlangularjsregexvalidation

Excess space located adjacent to primary content on website

When you scroll to the left of the page, next to the main content and outside of the browser width, there is additional space occupied only by the background of the Body CSS. Take a look at the site in action: . @charset "utf-8"; /* Custom CSS Styles * ...

htmlcss

I'm encountering an issue where my information doesn't seem to be getting through to the Django

For some reason, the data I am trying to post to /api/recipe/recipes/ is not showing up in my HTML {% extends 'base.html' %} {% block content %} <!DOCTYPE html> <html> <head> <script src="h ...

javascripthtmljqueryajaxrest

Is there a way to transfer all the selected items to PHP using AJAX?

I am looking for a way to send all the checked items into PHP using AJAX. I want to include the checkbox ID and inner text in the information that is sent. For example, if I check box1 and box2, I want the relevant information to be saved in Data and then ...

javascriptphpjqueryhtmlajax