KATEGORIA:

Jak wyśrodkować element z position absolute

wyśrodkuj absolute

WYŚRODKOWANIE POSITION:ABSOLUE

position: absolute czasem sprawia problemy i nie daje się ujarzmić. Podpowiadam jak wyśrodkować element znajdujący się wewnątrz elementu z position: absolute.

<html>
<head>
<meta charset="utf-8" />
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

<section>
    <div>
        <h1> REYCO BLOG</h1>
    </div>
    
</section>

</body>
</html>

Tak napisany kod, wygląda następująco:

1

Aby dodać sekcji position: absolute jednocześnie uzyskując wyśrodkowany tekst należy użyć języka css:

section{
    position: absolute;
    left: 50%;
}

div{
    position: relative;
    left: -50%;
}

p{
    font-size: 100px;
}

Efekt:

2

FLEXBOX

Kiedyś faktycznie był to spory problem. Dziś wiele takich dylematów zastępuje flexbox – takich sposób składania stron, dzięki któremu kilkoma prostymi komendami możemy ustawiać kolumny czy wiersze w odpowiednim miejscu, także wyśrodkować.

Więcej na temat flexboxa możecie przeczytać w artykule: FLEXBOX – ŚCIĄGA

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *