centered divの上にヘッダーを配置するにはどうすればよいですか？（html/css）

私は新しいコーディングをしていますが、何かを理解することができましたが、解決策が見つからないように私は深く悩まされています。centered divの上にヘッダーを配置するにはどうすればよいですか？（html/css）

私は、ページ上に水平に&の垂直方向の中心divを持っています。私はそれの上にメインのdivを偏心させることなく、ヘッダーを配置したい。私はそれを見てみたいどのよう both are centered as a whole.

（上部の黄色を中心に、青ヘッダ）： yellow is centered, blue header on top.

... それは（両方とも全体として集中している）今のように見える方法

基本コード：

.outer { 
 
    display: table; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.middle { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.header { 
 
    width: 1000px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.main { 
 
    width: 1000px; 
 
    height: 500px; 
 
    background-color: yellow; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

<div class="outer"> 
 
    <div class="middle"> 
 
    <div class="header"></div> 
 
    <div class="main"> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-02-08 Teresa

いくつかのコードは、...あなたは何をしようとしているしてください？ – TricksfortheWeb

マークアップとCSSの基本的な例を少なくとも提供してください。それでも、クイックショット：ヘッダーの高さの負のマージン（固定高さの場合）をdivに設定するか、ヘッダーを 'display：fixed'に設定します。しかし、これは本当に状況によって異なりますので、いくつかのコードを記述してください。 – Connum

こんにちは！申し訳ありませんが、コードなしで間違って投稿しました。基本的な例と2つの画像でそれを更新しました。 – Teresa

これはおそらく最良の答えではありませんが、それはスタートです。私は容器を中心にthis methodを使用してセンタリングしました。次に、コンテナーの上部の属性（ヘッダーの高さの半分）に-50pxを追加し、コンテナを50px上に移動して、コンテンツのdivを完全に中央に戻しました。このソリューションはほとんどの新しいブラウザでは機能しますが、いくつかの「制限」more hereがあります。

HTML

<div class="centered-container"> 
    <div class="header"> 
     header stuff 
    </div> 
    <div class="content"> 
     Content stuff here. 
    </div> 
</div>

CSS

body { 
    background: #600; 
} 

.centered-container { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    top: calc(50% - 50px); 
    transform: translate(-50%, -50%); 
    width: 600px; 
    background: red; 
    color: white; 
    text-align: center; 
} 

.header { 
    height:100px; 
    background:blue; 
} 

.content { 
    height:300px; 
    background:teal; 
}

フィドルhere。

幅600px、高さ300px、高さ100pxのコンテンツを作成して見やすくなりました。負のマージン

出典

2017-02-08 17:52:38 flynorc

ヘッダーをメインのdivの上に置き、メインのdivをヘッダーなしの位置と同じにしておきたい（メインのdivにはイメージがあるので、私は唯一のものになりたいヘッダーにはロゴが表示されますので、上にしたい、メインと一緒に中央のコンテナに入れないようにしてください） – Teresa

ヘッダーには寸法がわかります（例：1000px * 100ピクセル）？中央のdivは、常に1000px * 500pxでなければなりませんか？ウィンドウが1000px * 600pxより小さい場合の動作は何ですか？ – flynorc

私はこれから新しいので、すぐに反応するデザインを検討することで学習を開始すべきではないと思っていました。私が学ぶとき、私はこれを最初からやるべきでしょうか？ウィンドウサイズに応じてパーセンテージを使用するか、または異なるディメンションを定義しますか？ – Teresa

<!DOCTYPE html> 
<html> 
<!-- Handles the init code(javascript,css,links) and style references --> 
<!-- Also, use body and head tags (THEY ARE IMPORTANT) --> 
<head> 
    <style> 
     /** Web browsers load whatever is in the <head> tag FIRST 
     */ 

     .outer { 
      display: table; 
      position: absolute; 
      height: 100%; 
      width: 100%; 
     } 

     .middle { 
      display: table-cell; 
      vertical-align: middle; 
     } 

     /* You can use "margin: 0 auto;" to center this object. 
     * No need for left and right margin centering. 
     * 
     * Also, set the position to be relative then try adding your heading object 
     */ 
     .header { 
      width: 1000px; 
      height: 100px; 
      background-color: blue; 
      margin: 0 auto; 
      position: relative; 
     } 

     /* You don't need the margin to be 0 auto on both right and left 
     * if you have the width 100% 
     */ 

     .main { 
      width: 100%; 
      height: 500px; 
      background-color: yellow; 
      margin: 0; 
     } 

    </style> 
</head> 

<!-- Everything In Body Tag is style elements or skeletal HTML (div's, span's, format)--> 
<!-- Place the heading OUTSIDE of the header element (in the outer div) this shouldn't alter the position of the 
header. --> 
<body> 
    <div class="outer"> 
     <div class="middle"> 
     <div class="header"></div> 
     <div class="main"> 
     </div> 
     </div> 
    </div> 
</body>

出典

2017-02-08 18:11:58 Syntax

centered divの上にヘッダーを配置するにはどうすればよいですか？ （html/css）

答えて

関連する問題

centered divの上にヘッダーを配置するにはどうすればよいですか？（html/css）