替代顯示：flex

試圖擺脫顯示：flex，因爲它與Internet Explorer版本不兼容。需要一個替代方案來顯示我的標題內聯和居中。我試圖使用內聯塊和塊，但沒有得到任何運氣。替代顯示：flex

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

我如何使用flex，nav和h2在一行中並排排列，集中在網頁頂部的標題中。我想要那樣。 –

替代顯示：flex

回答

相關問題