Jak wyśrodkować element z position absolute
Posted On 4 października 2015
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:
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:
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