Alternative to display:flex

后端 未结 2 1584
说谎
说谎 2021-01-23 22:41

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

相关标签:
2条回答
  • 2021-01-23 23:06

    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>

    0 讨论(0)
  • 2021-01-23 23:14

    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>

    0 讨论(0)
提交回复
热议问题