Cześć,
potrzebuje małej pomocy z HTML i CSS. Muszę wykonać jedną rzecz, a dawno nie pisałem żadnej strony więc wszystko mi wyleciało z głowy.
Więc mam problem z wyśrodkowaniem elementu na stronie.
Skrypty:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div class="tlo">
<img src="img/tlo.jpg" alt="czerwone tło" width="600px" height="300px"/>
</div>
<div class="miniatura">
<img src="img/miniaturka.png" alt="niebieski element" width="100px" />
</div>
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
width: 600px;
margin: 0 auto;
}
#container {
}
.tlo {
position: absolute; top: 0;
z-index: 1;
}
.miniatura {
position: absolute; top: 0;
z-index: 2;
}
Przykład jak mniej wiecej to wyglada na stronie:
https://zapodaj.net/822e6cbcadb39.png.html
Chodzi o to, żeby niebieski element był na środku czerwonego.
Przeglądałem internet z nadzieją na znalezienie rozwiązania ale niestety. Probowałem test-align, pozycjonowanie i element nadal jest w tym samym miejscu. Bardzo możliwe, że coś źle wpisałem w tym kodzie u góry i się wszystko blokuje. Jestem na totalnym początku jeśli chodzi o HTML i CSS więc liczę na pomoc z waszej strony :D