How to align a button on the bottom of a DIV

0

How do I move a button to the bottom of a DIV?

<div class="item-info">
   <h3><a href="https://www.lookandsoul.com.br/produto/cinto-fivela-dupla-preto/">Cinto fivela dupla preto</a></h3>
   <span class="product-terms">
      <a href="https://www.lookandsoul.com.br/moda-feminina/news/" rel="tag">News</a>,
      <a href="https://www.lookandsoul.com.br/moda-feminina/acessorios/" rel="tag">Acessórios</a>
   </span> 
   <a href="/?add-to-cart=6245" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart  is-textual product-type-simple" data-product_id="6245" data-product_sku="199000" aria-label="Adicionar “Cinto fivela dupla preto” no seu carrinho" rel="nofollow">
      Comprar
   </a>
   <span class="price">
      <span class="woocommerce-Price-amount amount">
         <span class="woocommerce-Price-currencySymbol">R$</span>
         69,90
      </span>
      <span class="wc-simulador-parcelas-parcelamento-info-container">
         <span class="wc-simulador-parcelas-parcelamento-info best-value no-fee">
            Em até 1x de
            <span class="woocommerce-Price-amount amount">
               <span class="woocommerce-Price-currencySymbol">R$</span>
               69,90
            </span>
         </span>
      </span>
   </span>
</div>

I want to move the BUTTON class down from the ITEM-INFO class.

From point 1 to point 2.

FollowCSScodeprint

    
asked by anonymous 21.09.2018 / 23:59

1 answer

0

Change the position of the button's HTML, put it below <span class="price"> :

<div class="item-info">
   <h3><a href="https://www.lookandsoul.com.br/produto/cinto-fivela-dupla-preto/">Cinto fivela dupla preto</a></h3>
   <span class="product-terms">
      <a href="https://www.lookandsoul.com.br/moda-feminina/news/" rel="tag">News</a>,
      <a href="https://www.lookandsoul.com.br/moda-feminina/acessorios/" rel="tag">Acessórios</a>
   </span> 
   <span class="price">
      <span class="woocommerce-Price-amount amount">
         <span class="woocommerce-Price-currencySymbol">R$</span>
         69,90
      </span>
      <span class="wc-simulador-parcelas-parcelamento-info-container">
         <span class="wc-simulador-parcelas-parcelamento-info best-value no-fee">
            Em até 1x de
            <span class="woocommerce-Price-amount amount">
               <span class="woocommerce-Price-currencySymbol">R$</span>
               69,90
            </span>
         </span>
      </span>
   </span>
   <a href="/?add-to-cart=6245" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart  is-textual product-type-simple" data-product_id="6245" data-product_sku="199000" aria-label="Adicionar “Cinto fivela dupla preto” no seu carrinho" rel="nofollow">
      Comprar
   </a>
</div>

To center, use the style below, it should override the default style if you can not change it:

div.item-info a.add_to_cart_button{
   position: relative;
   top: 0;
   right: 0;
   display: inline-block;
   left: 50%;
   -webkit-transform: translate(-50%);
   transform: translate(-50%);
   background: yellow;
}

It may be necessary to make a space above the button, so add another property margin-top: 15px; (change 15px as you see fit).

    
22.09.2018 / 01:24