div内の2つの要素のうちの1つのみを中心にしますか？

私は.topnavバーといくつかの要素を持つ.containerの簡単なWebページを持っています。私は、ページのbody内の.containerではなく、.topnavを中心にして、垂直にセンタリングされるようにしています。div内の2つの要素のうちの1つのみを中心にしますか？

display:flex; 
align-items:center; 
justify-content:center;

.topbarと.container中心と両方：しかし、私はbodyスタイリングしようとしました。 .containerだけを垂直にセンタリングするにはどうすればよいですか？

body, 
 
html { 
 
    height: 100%; 
 
} 
 

 
.contact_box { 
 
    text-align: center; 
 
    background-color: red; 
 
    border: 1px solid #c0c0c0; 
 
    border-radius: 5px; 
 
    height: 20em; 
 
    width: 25em; 
 
    box-shadow: 1px 1px 6px #757677; 
 
    float: left; 
 
} 
 

 
.contact_box img { 
 
    margin-top: 3.3em; 
 
    margin-bottom: 1.2em; 
 
    height: 3em; 
 
    width: 3em; 
 
} 
 

 
.contact_box h3 { 
 
    color: #6d6d6d; 
 
} 
 

 
#contact .container { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<body id="contact"> 
 
    <div class="topnav" id="myTopnav"> 
 
    <a href="index.html">Home</a> 
 
    <a href="about.html">About</a> 
 
    <a href="#" class="selected">Contact</a> 
 
    <a class="icon" onclick="myFunction()">&#9776;</a> 
 
    </div> 
 

 
    <div class="container"> 
 
    <div class="row" id="contact_section"> 
 
     <div class="contact_box" class="col-md-4"> 
 
     <a href="https://github.com/" target="_blank"><img src="resources/github_logo.png" alt="Github"></a> 
 
     <br> 
 
     <h3>GitHub</h3> 
 
     </div> 
 

 
     <div class="contact_box" class="col-md-4"> 
 
     <a href="https://www.linkedin.com" target="_blank"><img src="resources/linkedin_logo.png" alt="LinkedIn"></a> 
 
     <h3>LinkedIn</h3> 
 
     </div> 
 

 
     <div class="contact_box" class="col-md-4"> 
 
     <img src="resources/email_icon.png" alt="EMAIL"> 
 
     <h3>Email</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

ここでそれが今どのように見えるかです：

出典

2017-10-20 nezdiro

あなたのnavbarでflexboxの動作をしたくないので、最も簡単な解決策はおそらくnavbarをflexboxに入れないことです。 –

navbarがflexboxにあるように見えません。 '.container'だけが' display：flex'に設定されています。よくわかりません。 – showdev

ああ、あなたは正しい@showdevだ。私も混乱しています - Nezdiroはあなたが求めていることを明確にしてくれますか？あなたがここに投稿したコードスニペットは、間違っていることのあなたの記述と一致しません。 –

こんにちは100％とした容器の高さを設定し、ページの中央に垂直に整列しますビューポートの：

#contact .container { 
    height:100vh; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
}

出典

2017-10-20 20:10:13 Federico

私はこの答えが好きです！唯一の問題は、ボディ全体がビューポートの高さよりも大きいため、ナビゲーションバーの下をスクロールするとボックスが中央に表示されることです。 navbarの高さは68pxです。私は '.container'の先頭を' -68px'に設定しようとしましたが、これは何の効果もないようです。 – nezdiro

私はあなたが探しているものを見ていると思う：
ページの上部と下の本文にヘッダーがあり、本文の内容が縦に中央に表示されています。

以下の私の例では3つのフレックスシステムがあります。

最初のセットは、最大<body>二つのアイテムを持つ垂直フレックスコンテナとして：.topnavと.container。項目はフレックスコンテナの開始位置に合わせてjustify-content: flex-start（これはデフォルトですが）であり、.containerはフレックスコンテナをいっぱいにしてflex-grow:1になります。

.containerは、縦フレックスコンテナとして、それぞれ.rowを項目として設定します。アイテムは、それぞれ、垂直方向と水平方向の中央に、justify-content: centerとalign-items: centerで配置されています。

第3は、.row要素を水平フレックスコンテナ（flex-direction: rowがデフォルト）として設定し、それぞれ.contact_boxを項目として設定します。項目は水平方向の中央にjustify-content: centerで配置されます。

html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    min-height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: flex-start; 
 
} 
 

 
.container { 
 
    flex-grow: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: center; 
 
} 
 

 
.contact_box { 
 
    background-color: red; 
 
    border: 1px solid #c0c0c0; 
 
    border-radius: .5em; 
 
    box-shadow: 1px 1px 6px #757677; 
 
    padding: 1em 2em; 
 
    text-align: center; 
 
} 
 

 
.contact_box h3 { 
 
    margin: .25em 0 0; 
 
}

<div class="topnav"> 
 
    <a href="#">Home</a> 
 
    <a href="#">About</a> 
 
    <a href="#" class="selected">Contact</a> 
 
    <a class="icon">&#9776;</a> 
 
</div> 
 

 
<div class="container"> 
 

 
    <div class="row"> 
 

 
    <div class="contact_box"> 
 
     <a href="https://github.com/" target="_blank"><img src="resources/github_logo.png" alt="Github"></a> 
 
     <br> 
 
     <h3>GitHub</h3> 
 
    </div> 
 

 
    <div class="contact_box"> 
 
     <a href="https://www.linkedin.com" target="_blank"><img src="resources/linkedin_logo.png" alt="LinkedIn"></a> 
 
     <h3>LinkedIn</h3> 
 
    </div> 
 

 
    <div class="contact_box"> 
 
     <img src="resources/email_icon.png" alt="EMAIL"> 
 
     <h3>Email</h3> 
 
    </div> 
 

 
    </div> 
 

 
</div>

このよう

、各フレックスシステムと別の色：

そして、あなたは別の.rowを追加した場合、それは次のようになります。

出典

2017-10-20 20:24:42 showdev

div内の2つの要素のうちの1つのみを中心にしますか？

答えて

関連する問題