[flexbox] verticaal centreren - hoogte browser - Softwareontwikkeling

woensdag 12 augustus 2015 10:51

Acties:

0 Henk 'm!

Topicstarter

Hoi allen,

met flexbox is het heel makkelijk om iets verticaal te centreren.
Maak een flex-container, en centreer de inhoud door middel van:

Cascading Stylesheet:

.container {
    height: 400px;
    display: flex;
    align-items: center;
}

Echter, dit werkt (voor zover ik nu zie) alleen als de hoogte van de container bekend is en vast staat. In dit geval 400px.

Als je hier 100% neer zet, dan centreert hij helemaal niets meer. Iemand een idee waardoor dit komt?

woensdag 12 augustus 2015 10:52

Acties:

0 Henk 'm!

Room42

Is de container van de container wel 100% hoog?

"Technological advancements don't feel fun anymore because of the motivations behind so many of them." Bron

woensdag 12 augustus 2015 11:19

Acties:

0 Henk 'm!

PdeBie

Topicstarter

Nooit geweten dat je de height van de body tag dan ook op 100% moet zetten.

Je zou toch verwachten dat die altijd 100% is?

--edit--

En hier dan de werkende HTML en CSS.

HTML:

<!doctype html>
<html>
    <head>
        <link href="/css/reset.css" rel="stylesheet">
         <link href="/css/main.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
                    Zowel horizontaal als verticaal gecentreerd.
        </div>
    </body>
</html>

Cascading Stylesheet:

* { box-sizing: border-box; }

html, body { height: 100%; }

.container{
    height: 100%;
    display: flex;
    flex-direction: column;
    
    align-items: center;
    justify-content: center;
}

[ Voor 82% gewijzigd door PdeBie op 12-08-2015 11:38 ]

woensdag 12 augustus 2015 20:44

Acties:

0 Henk 'm!

R4gnax

PdeBie schreef op woensdag 12 augustus 2015 @ 11:19:
Nooit geweten dat je de height van de body tag dan ook op 100% moet zetten.

Hoef je ook niet. Alle browsers die flexbox ondersteunen ondersteunen ook viewport units, dus:

Cascading Stylesheet:

.container {
    height: 100vh;
    display: flex;
    align-items: center;
}

en klaar.