Wyśrodkowanie elementu

pytanie zadane 9 grudnia 2019 w HTML i CSS przez Steady Obywatel (1,200 p.)

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

2 odpowiedzi

odpowiedź 13 grudnia 2019 przez pirouetti Mądrala (6,490 p.)
wybrane 13 grudnia 2019 przez Steady

Najlepsza

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <style>
        body,
        html {
            margin: 0
        }

        .tlo {
            height: 300px;
            width: 600px;
            margin: 0 auto;
            background: #C33C54;
            display: flex;
            justify-content: center;
            align-items: center
        }

        .miniatura {
            width: 100px;
            height: 100px;
            background: #254E70
        }
    </style>

</head>

<body>
    <div class="tlo">
        <div class="miniatura">
        </div>
    </div>

</body>

</html>

Uprościłem twój kod.

Po pierwsze, nie powinieneś ograniczać width dla body ani html, tylko dla swoich elementów.

Jeśli chcesz kolor tła, dodajesz background w css, kody kolorów możesz znaleźć np. tutaj:

https://coolors.co/app

Pusty container był zbędny więc wywaliłem.

W divie tło o kolorze czerwonym znajduje się miniatura w innym kolorze nadanym w css,

Kod:

            display: flex;
            justify-content: center;
            align-items: center

Sprawia, że wewnątrz diva "tło" każdy element (tutaj div "miniatura") wyśrodkowuje się pionowo i poziomo.

Rozmiary obu divów możesz zmienić wedle życzenia.

odpowiedź 9 grudnia 2019 przez Radek Koniarski Użytkownik (870 p.)

position : relative na container i translate tranfsform -50 , -50 wysrodkować

komentarz 9 grudnia 2019 przez Steady Obywatel (1,200 p.)

Niestety nie pomogło.

Podobne pytania

0 głosów

1 odpowiedź 331 wizyt

Wyśrodkowanie elementu na stronie

pytanie zadane 16 maja 2020 w HTML i CSS przez Wiktor Koźlik Użytkownik (950 p.)

0 głosów

3 odpowiedzi 1,001 wizyt

HTML/CSS Wyśrodkowanie elementu.

pytanie zadane 11 listopada 2019 w HTML i CSS przez radzioszq Nowicjusz (120 p.)

0 głosów

1 odpowiedź 421 wizyt

Wyśrodkowanie elementu wypozycjowanego absolutnie

pytanie zadane 21 lipca 2017 w HTML i CSS przez ajzyn Użytkownik (510 p.)

Wyśrodkowanie elementu

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

2 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci