个人中心
gpt4 book ai didi

html - 替代显示 :flex

转载 作者：行者123 更新时间：2023-11-28 03:31:43 25 4
gpt4 key购买 nike

尝试摆脱 display: flex 因为它与 Internet Explorer 版本不兼容。需要一个替代方法来显示我的标题内联和居中。我试过使用内联 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>

最佳答案

您可以创建一个包装器 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>

关于html - 替代显示 :flex，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44705984/

25 4 0
文章推荐： php - 在另一个页面上调用 Javascript 函数时传递 PHP 变量
文章推荐： javascript - 如何通过传递参数从 .gs 文件中的方法调用 "somename.html"？
文章推荐： javascript - Nativescript 中的底部栏导航不起作用
文章推荐： html - 我怎样才能得到这样的 table ？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com