0

Estou tentando centralizar um botão no meu card.

Eu gostaria de obter esse resultado:

inserir a descrição da imagem aqui

precisa ser com position absolute pois os outros cards as vezes possuem descrição maior e o botão "Ver detalhes" fica com distancias diferentes.

Atualmente eu tentei:

.btn-comprar{
    position: absolute;
    bottom: 0;
    left: 0;
}

Atualmente o botão com essas propriedades tem o seguinte resultado:

inserir a descrição da imagem aqui

Meu html:

  <div class="row mt-2">
    <div *ngFor="let produto of produtos" [class.col-md-12]="visualizacao == 'lista'" class="col-sm-12 mt-2 col-md-4 produto-lista pb-4">

      <div [class.colLista]="visualizacao == 'lista'" class="thumb-wrapper">
        <span *ngIf="produto.desconto != null" class="desconto"><i class="fas fa-angle-down"></i>
          {{ produto.desconto }} %</span>
        <div class="img-box">
          <a [routerLink]="['/produtos/', produto.id, produto.slug]">
            <img src="{{ produto.foto_prin_1 }}" class="img-responsive img-fluid" alt="">
          </a>
        </div>
        <div [class.thumb-lista]="visualizacao == 'lista'" class="thumb-content">

          <h4>{{ produto.nome }}</h4>

          <app-media-avaliacao-produto [numero_avaliacoes]="produto.numero_avaliacoes" [avaliacao]="produto.aval"></app-media-avaliacao-produto>


          <p class="item-price"><span *ngIf="produto.desconto != null"
              style="text-decoration: line-through">{{ produto.preco_anterior | currency:'BRL' }}</span>
            <b>{{ produto.preco | currency:'BRL' }}</b></p>
          <a [routerLink]="['/produtos/', produto.id, produto.slug]" class="btn btn-comprar">ver
            detalhes
          </a>

        </div>
      </div>
    </div>
  </div>

CSS:

.thumb-wrapper{
    padding: 35px;
    background: #fff;
    border-radius: 6px;
    text-align: center;
    position: relative;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
    border: 1px solid #caccca;
    height: 100%;
}

Eu utilizo a biblioteca material design bootstrap

1
  • Já tentou apenas colocar o botão dentro de tags <center> sem ser absoluto? testei aqui e funcionou. 9/04/2019 às 13:52

2 Respostas 2

2

Cara tentei simular aqui e aparentemente ele ficou alinhado, então tem algo a mais no seu código que está atrapalhando... Mas veja no exemplo abaixo que para centralizar um elemento absoluto vc tem que colocar margin:auto e left:0 e right:0 assim ele fica no meio. E o bottom vc ajusta com quantos px quiser não tem segredo...

.box {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
}
.box .btn {
    position: absolute;
    width: 30px;
    margin: auto;
    bottom: 10px;
    left: 0;
    right: 0;
    border: 1px solid #000;
}
<div class="box">
    <div class="btn">btn</div>
</div>

1
0

Você pode usar porcentagem combinado com calc no seu css para calcular a proporção. ex:

.box {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
}
.box .btn {
    position: absolute;
    width: 30px;
    bottom: 10px;
    left: calc(50% - 15px);    
    border: 1px solid #000;
}
<div class="box">
    <div class="btn">btn</div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .