替代显示：flex

Question

试图摆脱 display: flex 因为它与 Internet Explorer 版本不兼容。需要一个替代方法来显示我的标题内联和居中。我尝试使用 inline-block 和 block，但没有得到任何运气。

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>

Answer 1

您可以创建一个包装 div 并在其中使用显示表以使您的导航栏居中。但是，您的问题是将 h2 标签垂直居中，还是只想让整个标题水平居中，同时让导航内联？

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>

Answer 2

我对您的标记使用了一些浮动和位置更改来帮助您入门。您可能需要修改以获得所需的对齐方式

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>