Center image inside div horizontally

Question

I am trying to set the image with arrow up/down to horizontally center of the div.

I have read some tutorials and questions here, but the following method does

Answer 1

Center using transform - one of the ways you can center a positioned element. Add these styles to clickexpander:

left: 50%;
transform: translateX(-50%);

See demo below:

/* Animation */
$(document).ready(function() {
  $('.text').hide();
  $('.expander').click(function() {
    $(this).parent().next().slideToggle(200);
  });
  $('.text').slideUp(200);
});

/* Change image */
$(function() {
  $('.expander').click(function() {
    $(this).children('img').each(function() {
      $(this).toggle(0);
    });
  });
});

.red {
  background-color: #cc1042;
}
.whitetext {
  color: #ffffff;
}
.lefttext {
  text-align: left;
}
.centertext {
  text-align: center;
}
.righttext {
  text-align: right;
}
.littpadding {
  padding: 15px 15px 15px 15px;
}
.paddingned80 {
  padding-bottom: 80px;
}
.close {
  opacity: 1!important;
}
.close:focus,
.close:hover {
  opacity: 1!important;
}
.clickexpander {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.clickexpander img {
  max-width: 50px;
}

  

    
Sesong
    
990,- pr år
    
      

        
        
      
    

    

      

        

          

            Befaring av hytte/fritidshus og befaringsrapport 2 ganger årlig