Alternative to display:flex

html css flexbox

12,358

Solution 1

I used some float and position changes to your markup to get you started. you may need to modify to get the alignment you wanted

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>

Solution 2

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

<!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>

12,358

Author by

A.Student

Updated on June 14, 2022

Comments

A.Student almost 2 years

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 inline-block and block, but wasn't getting any luck.

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>