How to align a button at the bottom of a DIV

Question

How to move a button (link) 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 2.

Follow CSS code print

Answer 1

Try to make a div that includes all this text you’re putting in this area minus the button, then you put the properties of the flex in the div that encompasses the two:

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

Answer 2

Change the HTML position of the button, placed 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 cannot 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;
}

You may need to spacing above the button, so add another property margin-top: 15px; (change the 15px as you see fit).