Center image inside div horizontally

前端 未结 4 1937
野的像风
野的像风 2021-01-24 14:49

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

4条回答
  •  暖寄归人
    2021-01-24 15:18

    Add text-align:center to .clickexpander and display:inline-block to img and make sure to add position:relative the parent div when you used position:absolute

    /* 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;
      position:relative;
    }
    
    .close { 
      opacity: 1!important;
      display:inline-block;
      float:none !important;
    }
    
    .close:focus, .close:hover {
      opacity: 1!important;
    }
    
    .clickexpander {
      position:absolute;
      bottom: 10px; 
      text-align: center;
      width: 95%;
    }
    
    .clickexpander img {
      max-width: 50px;
    }
    
    
    
    
    
    
    
    

提交回复
热议问题