Sobreposição das camadas e centralização

soaresra · Outubro 24, 2017

Olá pessoal....

Eu tenho um problema que não estou conseguindo resolver.

Eu fiz dois modelos, um usando tabela que não quero mais usar e o outro usando DIV e CSS

HTML: http://www.alsoa.com.br/testes/index2.htm

Versão com Divs e CSS: http://www.alsoa.com.br/testes/index.htm

Eu preciso colocar uma marca dágua nas minhas fotos que coloco na web.
A marca é um simples código tipo D81WKH8D-528A-D111-7E2A144 que deve ficar por cima da imagem e centralizado.

Eu até consegui fazer só usando div e css, mas não consigo centralizar na página e o código ficou compactado.

/* Códigos CSS */

#PhotoBox{
z-index: 0;
position: absolute;
margin-left: auto;
margin-right: auto;
}

#PhotoShow{
z-index: 1;
position: absolute;
}

#CodigoShow{
z-index: 2;
position: absolute;
float: right;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Teste</title>
<link href="teste.css" rel="stylesheet" type="text/css">
</head>
<body align="center">
<div id="PhotoBox">
<div id="PhotoShow">
<img src="HondaCafe.jpg"/>
</div>
<div id="CodigoShow">
<p>D81WKH8D-528A-D111-7E2A144</p>
</div>
</div>
</body>
</html>

Aphrodi · Outubro 25, 2017

Esse é o jeito mais simples que conheço, porém tem que determina um tamanho fixo para a imagem, e dependendo de aonde você for usar tem que refazer o código, qualquer coisa avise.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Teste</title>

<style type="text/css">
	
#PhotoBox {
    background: url(http://www.alsoa.com.br/testes/HondaCafe.jpg) center no-repeat;
    background-size: contain;
    width: 322px;
    height: 386px;
}
#PhotoBox:before {
    content: ' código ';
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #fff;
}
</style>
</head>
<body align="center">
<div id="PhotoBox">
</div>
  </body>
</html>