Alternative to display:flex

Question

Trying to get rid of display: flex because its not compatible with internet explorer versions. Need an alternative to display my header inline and centered. I\'ve tried to use i

Answer 1

You can create a wrapper div and use display table inside in order to center your navbar. But is your problem to center the h2 tag vertical or do you want to have only your whole heading centered horizontal while having the nav inline?

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;
    }
    }

    
    
    
        
            
            
            
            
            
        
        
        

            

              
                    menu
                    Home
                    About
                    Knox Enterprises