PDA

Zobacz pełną wersję : css - flex


qrdziel
10-03-2021, 23:39
chcialbym w sekcji wysrodkowac dwa elemeny
pisze html:

<section class="container-center">
<h1>LOGO</h1>
<h2>slogan reklamowy</h2>
</section>
css:

.container-center {
height: 100vh;
display: flex;
align-items: center;
justify-content: center }
normalnie h1 i h2 ustawiaja sie jedno pod drugim, ale poniewaz jest flex to potraktowane sa jak blokowo
Bazyl
11-03-2021, 07:44
A problem polega na?
https://codepen.io/piotr-kwiatkowski/pen/LYbMWWX
qrdziel
11-03-2021, 11:33
o toto
dziala
a tak z ciekawosci gdybym chcial zmiksowac: dwa obok siebie i jedno pod spodem.
Np.:
logo | nazwa
slogan
Bazyl
11-03-2021, 11:59
Jak usuniesz z mojego przykładu jeden element (dziecko) z niebieskiego, to co się stanie?
qrdziel
11-03-2021, 20:46
hmmm
nie wiem
mam tak:

<section class="container-center">
<h1 class="logo">LOGO</h1> <h1 class="nazwa">Nazwa</h1>
<h1 class="slogan">slogan reklamowy</h1>
</section>
i albo jeden kolo drugiego,albo jeden nad drugim
Bazyl
11-03-2021, 21:27
Nie usunąłeś jednego eleoentu dokładnie tak, jak prosiłem...
Np. tak https://codepen.io/piotr-kwiatkowski/pen/LYbMWWX
qrdziel
13-03-2021, 12:08
dobre rozwiazanie.
ale chciałbym, aby był jeden contener 80vh, a w nim centralnie na srodku trzy bloki H1 - dwa obok siebie i jeden zaraz pod nimi
w Twoim rozwiązaniu dolny tekst jest za daleko :(
Bazyl
14-03-2021, 08:44
Trzy bloki h1 to nie jest dobry pomysł ;-)

Do mojego rozwiązania dodaj właściwy css i osiągniesz to, co chcesz.