CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Afloz
Afloz

Reputation: 3665

Centering item on (Bootstrap) responsive image

I'm trying to center a button on an image with responsive property. I'm using boostrap 3. Currently I've used CSS margin-left and margin-right to center but of course this is not efficient especially when viewed on smaller viewports.

Here's my CSS

    .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;  
    }

Large screen display: enter image description here

Small screen display: enter image description here

So question is, how do I center the button irrespective of the device viewport?

Upvotes: 0

Views: 175

Answers (3)

sdvnksv
sdvnksv

Reputation: 9668

Adding 

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

will not resolve the issue as the element is positioned absolutely. Please try the code below: 

.gallery-list > li  .gallery-thumbnail {
    position: relative;
    display: block;
}
.gallery-list > li  .gallery-thumbnail i {
    position: absolute;
    top: 50%;
    margin-top: -25px; /* your icon height devided by 2 */
    left: 50%;
    margin-left: -21px; /* your icon width devided by 2 */
    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;
}

Upvotes: 0

Vinz243
Vinz243

Reputation: 9938

That's b/c your margin is not responsible. It uses absolute values; prefer :

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

Upvotes: 3

wennho
wennho

Reputation: 133

You can use bootstrap's helper class center-block

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

Or just add 

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

Upvotes: 2

Related Questions