表示方法：フレックス

ディスプレイを削除しようとしました。フレックスはインターネットエクスプローラのバージョンと互換性がないためです。ヘッダーをインラインで中央に表示するには、別の方法が必要です。私はインラインブロックとブロックを使用しようとしましたが、運が得られませんでした。表示方法：フレックス

CSS：

html, body { 
     position: relative; 
     margin: 0; 
     padding: 0; 
     background-image: url("backround.jpg"); 
     background-repeat: repeat-y; 
    } 
    /*Nav Menu/Home Page*/ 

    .index-header { 
     display: flex; 
     position: fixed; 
     justify-content: center; 
     align-items: center; 
     width: 100%; 
     background-image: url("header.jpg"); 
     background-position: center; 
     z-index: 1; 
     text-transform: uppercase; 
     border-bottom: 5px solid #ff8000; 
     border-top: 5px solid #ff8000; 
     text-shadow: 2px 2px #000; 
    } 

    header h2 { 
     font-family: Georgia; 
     font-size: 1.6em; 
     color: #fff; 
     text-shadow: 3px 3px #000; 
    } 

    nav { 
     padding: 1%; 
     overflow: hidden; 
    } 

    nav a { 
     float: left; 
     display: block; 
     color: #ff8000; 
     text-align: center; 
     padding: 14px 16px; 
     text-decoration: none; 
     font-size 17px; 
     font-family: helvetica; 
     letter-spacing: 2px; 
    } 

    nav li, nav ul{ 
     list-style: none; 
    } 

    nav a:hover { 
     background-color: #fff; 
     color: #ff8000; 
    } 

    nav .material-icons { 
     padding-bottom: 5px; 
     display: none; 
     font-size: 36px; 
     color: #ff8000; 
    } 

    @media screen and (max-width: 600px) { 
    nav a:not(:first-child) {display: none;} 
    nav .material-icons { 
     float: left; 
     display: block; 
    } 
    }

HTML：

<!DOCTYPE html> 
    <html lang="en-us"> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <link rel="stylesheet" href="styles/normalize.css"> 
     <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
      <link rel="stylesheet" href="styles/style.css"> 
      <link rel="stylesheet/less" type="text/css" href="styles/style.less" /> 
      <script src="less.js" type="text/javascript"></script> 
      <title> Knox Enterprises Inc.</title> 
     </head> 
     <body> 
      <header class="index-header"> 
       <nav> 
        <i class="material-icons">menu</i> 
        <a href="index.html">Home</a> 
        <a href="About.html">About</a> 
        <a href="Contact.html">Contact</a> 
       </nav> 
       <h2>Knox Enterprises Inc.</h2> 
      </header>

出典

2017-06-22 A.Student

私はあなたが始めるために、あなたのマークアップにいくつかのフロートや位置の変更を使用していました。あなたは

html, body { 
 
     position: relative; 
 
     margin: 0; 
 
     padding: 0; 
 
     background-image: url("backround.jpg"); 
 
     background-repeat: repeat-y; 
 
    } 
 
    /*Nav Menu/Home Page*/ 
 

 
    .index-header { 
 
     /* display: flex;*/ 
 
     position: fixed; 
 
     justify-content: center; 
 
     align-items: center; 
 
     width: 100%; 
 
     background-image: url("header.jpg"); 
 
     background-position: center; 
 
     z-index: 1; 
 
     text-transform: uppercase; 
 
     border-bottom: 5px solid #ff8000; 
 
     border-top: 5px solid #ff8000; 
 
     text-shadow: 2px 2px #000; 
 
    } 
 

 
    header h2 { 
 
     font-family: Georgia; 
 
     font-size: 1.6em; 
 
     color: #fff; 
 
     text-shadow: 3px 3px #000; 
 
     top: 12px; 
 
    position: relative; 
 
    } 
 

 
    nav { 
 
     padding: 1%; 
 
     overflow: hidden; 
 
     float:left; 
 
    } 
 

 
    nav a { 
 
     float: left; 
 
     display: block; 
 
     color: #ff8000; 
 
     text-align: center; 
 
     padding: 14px 16px; 
 
     text-decoration: none; 
 
     font-size 17px; 
 
     font-family: helvetica; 
 
     letter-spacing: 2px; 
 
    } 
 

 
    nav li, nav ul{ 
 
     list-style: none; 
 
    } 
 

 
    nav a:hover { 
 
     background-color: #fff; 
 
     color: #ff8000; 
 
    } 
 

 
    nav .material-icons { 
 
     padding-bottom: 5px; 
 
     display: none; 
 
     font-size: 36px; 
 
     color: #ff8000; 
 
    } 
 
nav i,nav a ,.index-header h2{ 
 
display:inline; 
 
} 
 
    @media screen and (max-width: 600px) { 
 
    nav a:not(:first-child) {display: none;} 
 
    nav .material-icons { 
 
     float: left; 
 
     display: block; 
 
    } 
 
    header h2 { 
 
    
 
    } 
 
    }

<html lang="en-us"> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
    <link rel="stylesheet" href="styles/normalize.css"> 
 
     <head> 
 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
      <link rel="stylesheet" href="styles/style.css"> 
 
      <link rel="stylesheet/less" type="text/css" href="styles/style.less" /> 
 
      <script src="less.js" type="text/javascript"></script> 
 
      <title> Knox Enterprises Inc.</title> 
 
     </head> 
 
     <body> 
 
      <header class="index-header"> 
 
       <nav> 
 
        <i class="material-icons">menu</i> 
 
        <a href="index.html">Home</a> 
 
        <a href="About.html">About</a> 
 
        <a href="Contact.html">Contact</a> 
 
       </nav> 
 
       <h2>Knox Enterprises Inc.</h2> 
 
      </header>

出典

2017-06-22 17:47:34 happymacarts

あなたはラッパーのdivを作成し、ナビゲーションバーをセンタリングするために、内部の表示テーブルを使用することができます。しかし、h2タグを垂直にセンタリングするのはあなたの問題ですか、またはnavをインラインにしている間にあなたの全体の見出しだけを水平にしたいですか？

html, body { 
 
     position: relative; 
 
     margin: 0; 
 
     padding: 0; 
 
     background-image: url("backround.jpg"); 
 
     background-repeat: repeat-y; 
 
    } 
 
    /*Nav Menu/Home Page*/ 
 
    .wrapper { 
 
     position: fixed; 
 
     width: 100%; 
 
     background-image: url("header.jpg"); 
 
     background-position: center; 
 
     z-index: 1; 
 
     border-bottom: 5px solid #ff8000; 
 
     border-top: 5px solid #ff8000; 
 
    } 
 
    .index-header { 
 
     display: table; 
 
     margin: 0 auto; 
 
     line-height: 50px; 
 
     height: 50px; 
 
     text-align: center; 
 
     text-transform: uppercase; 
 
     text-shadow: 2px 2px #000; 
 
    } 
 
    
 
    .clear { 
 
    clear: both; 
 
    } 
 

 
    span.heading { 
 
     float: left; 
 
     display: block; 
 
     font-family: Georgia; 
 
     font-size: 1.6em; 
 
     color: #fff; 
 
     text-shadow: 3px 3px #000; 
 
    } 
 

 
    nav { 
 
     padding: 0 1%; 
 
    } 
 

 
    nav a { 
 
     float: left; 
 
     display: block; 
 
     color: #ff8000; 
 
     text-align: center; 
 
     padding: 0 16px; 
 
     min-height: 40px; 
 
     text-decoration: none; 
 
     font-size 17px; 
 
     font-family: helvetica; 
 
     letter-spacing: 2px; 
 
    } 
 

 
    nav li, nav ul{ 
 
     list-style: none; 
 
    } 
 

 
    nav a:hover { 
 
     background-color: #fff; 
 
     color: #ff8000; 
 
    } 
 

 
    nav .material-icons { 
 
     float: left; 
 
     padding-bottom: 5px; 
 
     display: none; 
 
     font-size: 36px; 
 
     color: #ff8000; 
 
    } 
 

 
    @media screen and (max-width: 600px) { 
 
    nav a:not(:first-child) {display: none;} 
 
    nav .material-icons { 
 
     float: left; 
 
     display: block; 
 
    } 
 
    }

<!DOCTYPE html> 
 
    <html lang="en-us"> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
    <link rel="stylesheet" href="styles/normalize.css"> 
 
     <head> 
 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
      <link rel="stylesheet" href="styles/style.css"> 
 
      <link rel="stylesheet/less" type="text/css" href="styles/style.less" /> 
 
      <script src="less.js" type="text/javascript"></script> 
 
      <title> Knox Enterprises Inc.</title> 
 
     </head> 
 
     <body> 
 
     <div class="wrapper"> 
 
      <nav class="index-header"> 
 
       
 
        <i class="material-icons">menu</i> 
 
        <a href="#">Home</a> 
 
        <a href="#">About</a> 
 
        <span class="heading">Knox Enterprises</span> 
 
        <span class="clear"></span> 
 
       
 
       
 
      </nav> 
 
      </div> 
 
      </body> 
 
      </html>

出典

2017-06-22 17:41:32 Schlumpf

を望んでいたアライメントにヘッダのタイトルで同じ行に左にナビゲーションを取得する方法を取得するために変更する必要がありますか？ –

あなたはどういう意味ですか？どの人を中心にしたいのか分かりません。ヘッダー全体を幅に合わせてセンタリングするか、高さ（垂直）にセンタリングする必要がありますか？左に？ – Schlumpf

どのように私はフレックスでそれを持って、navとh2は、ウェブページの上部にあるヘッダーの中央に並べて、単一の行にあります。私はそれが好きです。 –

答えて

関連する問題