0

.box {
height: 42px;
width: 800px;
background: aliceblue;
}
.inside-box {
height: 42px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.icon-box {
width: 24px;
height: 24px;
background: url('https://i.ibb.co/31yyBQv/download-icon.png') center no-repeat;
}
<div class="box">
<div class="inside-box">
<div class="icon-box"></div>
<a href="#">Fazer Download</a>
</div>
</div>

Eu gostaria de saber como eu faço para a DIV de (.inside-box) fique no limite do texto de "Fazer Download", sem que ela herde a largura da DIV pai (.box). Se alguém tiver uma solução eu agradeço!

2
  • use medidas relativas em % Commented 15/06/2020 às 18:37
  • o problema não é o tamanho, ela herda a largura da DIV com a classe "box", eu quero que ela fique com a largura limitada ao texto ou link "Fazer Download"...
    – user106463
    Commented 15/06/2020 às 18:39

2 Respostas 2

0

Vc tem que colocar na dive de dentro um width, mas que esse width seja "flexivel", uma das opções é colocar width: max-content; eu adicionei uma borda na div apenas para que vc veja que ela ocupa apenas a largura do próprio conteúdo, e não a largura do Pai

.box {
height: 42px;
width: 800px;
background: aliceblue;
}
.inside-box {
height: 42px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: auto;
border: 1px solid;
width: max-content;
}
.icon-box {
width: 24px;
height: 24px;
background: url('https://i.ibb.co/31yyBQv/download-icon.png') center no-repeat;
}
<div class="box">
  <div class="inside-box">
    <div class="icon-box"></div>
    <a href="#">Fazer Download</a>
  </div>
</div>

<div class="box">
  <div class="inside-box">
    <div class="icon-box"></div>
    <a href="#">Fazer Download agora, clique aqui</a>
  </div>
</div>

2
  • Obg. mano, salvou minha vida!
    – user106463
    Commented 15/06/2020 às 18:50
  • @BrunoB.Coelho dmr, fico feliz em ter ajudado!
    – hugocsl
    Commented 15/06/2020 às 18:51
0

Aqui é seu código HTML arrumado, estava com uma div a mais.

<div class="box">
  <div class="inside-box">
    <div class="icon-box"></div>
    <a href="#">Fazer Download</a>
</div>
</div>


.box {
height: 42px;
width: 800px;

}
.inside-box {
height: 42px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width:150px;
background: aliceblue;
display: block;
margin-left: auto;
margin-right: auto
}
.icon-box {
width: 24px;
height: 24px;
background: url('https://i.ibb.co/31yyBQv/download-icon.png') center no-repeat;
}

Pelo que eu entendi é isso: Coloquei um tamanho fixo para o ' Fazer Download ', centralizei, e o background, coloquei dentro do mesmo.

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