3

Não estou conseguindo deixar o mesmo padrão de alinhamento da imagem hallo-top_fd2.png no navegador chrome, aonde estou errando?

Grato

#container {
  display: table-row-group;
  position: relative;
  align-items: center;
  right: -34px;
}

#container figcaption {
  position: absolute;
  top: 70px;
  right: 185px;
  font-size: 60px;
  color: #FFF;
  text-shadow: 2px 2px 4px black;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: bold;
}
<figure id="container">
  <img src="img/hallo-top_fd2.png" />  
  <figcaption>FUNDAMENTAL II</figcaption>
</figure>

Firefox Texto

Chrome Texto

1 Resposta 1

0

Basicamente o problema é que o user-agente do Chrome não reconhece position: relative em um elemento com display: table-row-group;. Repare que na Aba Computed do DevTools, o elemento até pega o style do right: -34px, mas o position continua como static, o user-agente não deixa muda-lo, dessa forma o elemento filho com positino: absolute não fica relativo ai pai, pois o position: relative do pai que está com display: table-row-group; não está sendo aplicado no final das contas...

inserir a descrição da imagem aqui

Essa é a explicação do problema. Agora sobre a solução a sugestão é tirar esse display: table-row-group; do container pai, pois sinceramente, não faz sentido algum usar um display de <tbody> em uma <div>. Tente usar flex ou grid que vc vai se dar melhor.

inserir a descrição da imagem aqui

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 .