Texto relativo a imagem

Front-end
#1

CSS:
/INICIO DO CATALOGO DE PRODUTOS/
#produtos{
border-radius: 8px;
width: 100%;
position:relative;
margin-top:400px;
}
.produto{
width: 17%;
height: 235px;
margin-top: 25px;
border: 1.0px solid #ecf0f1;
border-radius: 8px;
float: left;
display: block;
margin-left: 85px;

}
.produto img{
margin: 15px;
position:relative;
left:10%;
max-width:200px;
max-height:150px;
width: auto;
height: auto;
}

.produto h1{
text-align:center;
font-size: 0.6em;
margin: 8px;
font-family:‘Arial’;
color: #2d3436;
margin-bottom: 5px;

}
.produto p{
text-align:left;
margin-left: 30%;
}
.produto h2{
text-align:center;
margin: 10px;
font-size: 17px;
}

HTML:

image
image.png880×118 3.6 KB

image
Quero que o texto fique relativo a borda debaixo e não a imagem .

#2

Não entendi o resultado esperado, vc pode explicar melhor?

#3

QUERO QUE O TEXTO FIQUE RELATIVO A BARRA INFERIOR, pq tipo, se eu adicionar uma imagem maior, o texto fica um mais baixo que o outro, quero padronizar isso.

image
image.jpg343×567 42.5 KB

#4

image
image.jpg1342×263 65.3 KB

repare que dependendo da imagem, o texto vai pra cimar ou para baixo, tá relativo a imagem, quero que fique relativo aquela barrinha abaixo do texto

#5

Coloca isso no H1

position: relative;
bottom: 0;

Vai posicionar na parte inferior do componente pai

Ou então define um tamanho exato para todas a imagem

#6

não foi.

#7

Agora entendi melhor.

Pensei numa solução usando a propriedade display: flex e suas propriedades relacionadas.

Se este for um projeto sério, tem que ver qual a versão mínima dos navegadores que você quer suportar e se eles aceitam estas propriedades.

Se tiver como target navegadores modernos, acredito que não terá problemas. Segue minha proposta.

HTML base

<div class="container">
    <div class="box">
        <img class="photo" src="https://via.placeholder.com/350x350">
        <h2 class="title">Contra Filé</h2>
    </div>
    <div class="box">
        <img class="photo" src="https://via.placeholder.com/350x150">
        <h2 class="title">Cupim A</h2>
    </div>
    <div class="box">
        <img class="photo" src="https://via.placeholder.com/350x450">
        <h2 class="title">Alcatra</h2>
    </div>
    <div class="box">
        <img class="photo" src="https://via.placeholder.com/350x275">
        <h2 class="title">Patinho</h2>
    </div>
</div>

O CSS

.container {
    background: red;
    max-width: 700px;
    margin: auto;
    display: flex;
}

.box {
    background: orange;
    margin: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.photo {
    width: 100%;
    display: block;
}

.title {
    background: blue;
    text-align: center;
    margin: 0;
}

Coloquei cores pra ficar mais fácil identificar cada coisa, mas se vc tirá-las vai ter uma percepção melhor do que você precisa.

Segue o link do código no codepen: https://codepen.io/anon/pen/YJPPvm

Abaixo estão alguns links sobre esta propriedade.

#8

e quais são?
“Se tiver como target navegadores modernos, acredito que não terá problemas. Segue minha proposta.”

#9

No meu exemplo usei três propriedades que estão presentes no Internet Explorer apenas a partir da versão 11, por exemplo.

Abaixo estão links para tabelas mostrando em quais navegadores cada propriedade que usei está disponível.

Você pode também usar o site caniuse.com para conhecer a compatibilidade dos recursos que deseja usar. https://caniuse.com/#feat=flexbox

1 curtida