ウィンドウの高さに垂直方向にアブソリュート要素+センタリングフレックス列の重心を合わせる

トレーニング用のWebサイトをコーディングしようとしていますが、修正方法がわからない2つの問題があります。ウィンドウの高さに垂直方向にアブソリュート要素+センタリングフレックス列の重心を合わせる

第1位：左側の3つのボタン（.side-buttons）は、ウィンドウの高さの中央（垂直）にある必要があります。

2番目：.svg要素と、その.svg要素の中央に配置して配置する見出しが含まれている.headline divがあります。私は.svg要素をposition: relative;にして、position: absolute;という見出しを付けたいと思っていましたが、高さが定義されていないときにどのように配置するのか分かりません。これはどうすればいいですか？またはこれを行う簡単な方法はありますか？

：それはのようになりますどのように

それが今のように見える方法

（フォントサイズを見ていない、私はそれ以降の修正します）

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>

出典

2017-02-11 Tomasz Czechowski

とimgの変化positionはbodydisplay: flex;を行い、flex-grow: 1;に.welcome-screenを設定し、左側のあなたのアイコンが縦方向にセンタリングされます。次に、bodyにflex-wrap: wrap;を、.intro-sectionにwidth: 100%;を設定して、その部分が.welcome-screenの下に表示されるようにします。次にposition: relativeを.headlineに追加し、h1にtop: 50%; left: 50%; transform: translate(-50%,-50%);を追加すると、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>

出典

2017-02-11 18:00:39

まあ、.side-ボタンが正しく配置されているが、テキストは.SVG要素の途中で、まだありません。あなたが修正した後に気付いたことは、次のセクション（ページの最後の '.intro-section'）が消えてしまったことです。これはおそらく、 'display：flex;'が本体に追加されたためですが、 'width：100％;'を '.intro-section'に追加すると（それは線を壊すはずです）、すべてを縮小してページの右側の最後のセクションを（通常のセクションのように）配置しないでください。 –

@TomaszCzechowskiが私の答えを更新しました。 –

全能のマイケル・コーカーを賞賛してください！彼はすべての答えを知っている！ –

h1

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

出典

2017-02-11 17:59:05

ウィンドウの高さに垂直方向にアブソリュート要素+センタリングフレックス列の重心を合わせる

答えて

関連する問題