替代显示：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

回答

相关问题