Zentrieren gestapelt Absolutes Element + Zentrierung Flex Spalte vertikal zur Fensterhöhe

Ich versuche, eine Trainingswebseite zu programmieren, und ich habe 2 Probleme, die ich nicht weiß, wie zu beheben.Zentrieren gestapelt Absolutes Element + Zentrierung Flex Spalte vertikal zur Fensterhöhe

1. Die 3 Tasten (.side-buttons) auf der linken Seite sollten in der Mitte (vertikal) der Fensterhöhe sein.

2: Es gibt ein .headline div, das ein .svg-Element und eine Überschrift enthält, die gestapelt und in der Mitte dieses .svg-Elements positioniert werden soll. Ich dachte darüber nach, das .svg-Element position: relative; zu machen und die Überschrift position: absolute; zu geben, aber ich weiß nicht, wie man es zentriert, wenn die Höhe nicht definiert ist. Wie mache ich das? Oder gibt es einen einfacheren Weg, dies zu tun?

Wie es wie jetzt aussieht (schaut nicht auf die Schriftgrößen, ich werde richtig, dass später)

Wie es sollte wie folgt aussehen:

body, html { 
 
    margin: 0; 
 
    font-family: 'Work Sans', sans-serif; 
 
    box-sizing: border-box; 
 
} 
 
.welcome-screen { 
 
    background-color: Lightblue; 
 
    background-size: cover; 
 
    height: 90vh; 
 
    margin: 3.5em; 
 
    box-sizing: border-box; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.side-buttons { 
 
    float: left; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
} 
 
.side-buttons img { 
 
    height: 2em; 
 
    padding: 0.5em 0 0.5em 0.5em; 
 
    display: block; 
 
} 
 
.side-buttons a { 
 
    text-decoration: none; 
 
} 
 
.headline { 
 
    display: block; 
 
    width: 100%; 
 
} 
 
.headline img { 
 
    width: 50%; 
 
    position: relative; 
 
} 
 
.headline h1 { 
 
    position: absolute; 
 
    z-index: 99; 
 
} 
 
nav { 
 
    text-align: center; 
 

 
} 
 
nav a { 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 
nav a:hover { 
 
    color: black; 
 
} 
 
.headline { 
 
    text-align: center; 
 
} 
 

 
.intro-section { 
 
    height: 300px; 
 
    background-color: grey; 
 
}

<body> 
 
<!-- header section --> 
 
    <!-- side buttons --> 
 
    <div class="side-buttons"> 
 
    <a href="http://pinterest.com/"> 
 
     <img src="http://placehold.it/40x40" alt="pinterest icon"> 
 
    </a> 
 
    <a href="http://facebook.com/"> 
 
     <img src="http://placehold.it/40x40" alt="facebook icon"> 
 
    </a> 
 
    <a href="http://twitter.com/"> 
 
     <img src="http://placehold.it/40x40" alt="twitter icon"> 
 
    </a> 
 
    </div> 
 
    <!-- end of side buttons --> 
 
    
 
<section class="welcome-screen"> 
 
    <div class="headline"> 
 
    <h1>The time is</h1> 
 
    <img src="css/assets/now.svg" alt="now"> 
 
    </div> 
 

 
    <nav> 
 
    <a href="">intro</a> 
 
    <a href="">gallery</a> 
 
    <a href="">services</a> 
 
    <a href="">contact</a> 
 
    </nav> 
 
</section> 
 
<!-- end of header section --> 
 

 
<section class="intro-section"> 
 

 
</section> 
 

 
</body>

Quelle

2017-02-11 Tomasz Czechowski

Make bodydisplay: flex; und setzen .welcome-screen-flex-grow: 1; und Ihre Symbole auf der linken Seite wird vertikal zentriert werden. Dann setzen Sie flex-wrap: wrap; auf body und width: 100%; auf .intro-section für diesen Abschnitt, um darunter anzuzeigen .welcome-screen. Dann füge position: relative zu .headline hinzu und füge top: 50%; left: 50%; transform: translate(-50%,-50%); zu deiner h1 hinzu und es zentriert über dem svg.

body, html { 
 
    margin: 0; 
 
    font-family: 'Work Sans', sans-serif; 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.welcome-screen { 
 
    background-color: Lightblue; 
 
    background-size: cover; 
 
    height: 90vh; 
 
    margin: 3.5em; 
 
    box-sizing: border-box; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-grow: 1; 
 
} 
 
.side-buttons { 
 
    float: left; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
} 
 
.side-buttons img { 
 
    height: 2em; 
 
    padding: 0.5em 0 0.5em 0.5em; 
 
    display: block; 
 
} 
 
.side-buttons a { 
 
    text-decoration: none; 
 
} 
 
.headline { 
 
    display: block; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
.headline img { 
 
    width: 50%; 
 
    position: relative; 
 
} 
 
.headline h1 { 
 
    z-index: 99; 
 
    margin: 0; 
 
    position: absolute; 
 
    top: 50%; left: 50%; 
 
    transform: translate(-50%,-50%); 
 
} 
 
nav { 
 
    text-align: center; 
 

 
} 
 
nav a { 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 
nav a:hover { 
 
    color: black; 
 
} 
 
.headline { 
 
    text-align: center; 
 
} 
 

 
.intro-section { 
 
    height: 300px; 
 
    background-color: grey; 
 
    width: 100%; 
 
}

<body> 
 
<!-- header section --> 
 
    <!-- side buttons --> 
 
    <div class="side-buttons"> 
 
    <a href="http://pinterest.com/"> 
 
     <img src="http://placehold.it/40x40" alt="pinterest icon"> 
 
    </a> 
 
    <a href="http://facebook.com/"> 
 
     <img src="http://placehold.it/40x40" alt="facebook icon"> 
 
    </a> 
 
    <a href="http://twitter.com/"> 
 
     <img src="http://placehold.it/40x40" alt="twitter icon"> 
 
    </a> 
 
    </div> 
 
    <!-- end of side buttons --> 
 
    
 
<section class="welcome-screen"> 
 
    <div class="headline"> 
 
    <h1>The time is</h1> 
 
    <img src="css/assets/now.svg" alt="now"> 
 
    </div> 
 

 
    <nav> 
 
    <a href="">intro</a> 
 
    <a href="">gallery</a> 
 
    <a href="">services</a> 
 
    <a href="">contact</a> 
 
    </nav> 
 
</section> 
 
<!-- end of header section --> 
 

 
<section class="intro-section"> 
 

 
</section> 
 

 
</body>

Quelle

2017-02-11 18:00:39

Nun werden .side-Tasten jetzt richtig positioniert ist, aber der Text ist noch nicht in der Mitte des .svg Element. Eine weitere Sache, die ich nach der Korrektur bemerkt habe, ist, dass der nächste Abschnitt (".intro-section" am Ende der Seite) verschwunden ist. Es ist wahrscheinlich wegen der 'display: flex;' zum Körper hinzugefügt, aber wenn ich 'width: 100%;' zu '.intro-section' hinzufüge (das sollte die Linie brechen, richtig?), Verkleinert es alles und zeigt die letzten Abschnitt auf der rechten Seite der Seite, anstatt sie darunter zu legen (genau wie im normalen Abschnitt). –

@TomaszCzechowski aktualisierte meine Antwort. –

Lob der allmächtige Michael Coker! Er kennt alle Antworten! –

Änderung position in img mit h1

.headline img { 
    width: 50%; 
    position: absolute; 
} 
.headline h1 { 
    position: relative; 
    z-index: 99; 
}

Quelle

2017-02-11 17:59:05

Zentrieren gestapelt Absolutes Element + Zentrierung Flex Spalte vertikal zur Fensterhöhe

Antwort

Verwandte Themen