Html 标题中以6个链接为中心的图像_Html

Html 标题中以6个链接为中心的图像

html

Html 标题中以6个链接为中心的图像,html,Html,我想创建一个简单的标题与4个链接和一个图像。总宽度应为85%。其他15%应在前导间距和尾随间距之间分开图像应为45% 每个环节应该是10%。应垂直居中，并将单词包装 |--7.5%--|Link1|Link2|---Image---|Link3|Link4|--7.5%--| 这是我到目前为止所拥有的。出于某种原因，链接都在一侧分组，而图像在另一侧分组 HTML <body> <div class="topnav" id="myTopnav">

我想创建一个简单的标题与4个链接和一个图像。总宽度应为85%。其他15%应在前导间距和尾随间距之间分开

图像应为45%

每个环节应该是10%。应垂直居中，并将单词包装

|--7.5%--|Link1|Link2|---Image---|Link3|Link4|--7.5%--|

这是我到目前为止所拥有的。出于某种原因，链接都在一侧分组，而图像在另一侧分组

HTML

<body>
        <div class="topnav" id="myTopnav">
            <nav>
                <a href="#home">HOME</a>
                <a href="#about">ABOUT</a>
                <a href="#contact">EXPERTISE</a>
                <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
                <a href="#about">INDUSTRIES</a>
                <a href="#about">FRIENDS OF MARY</a>
                <a href="#about">CONTACT</a>
                <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
            </nav>
        </div>

    </body>

有人能帮我修一下吗。这是链接。

为您提供一些指导，我建议将您的

nav

元素嵌套在

ul

元素中，每个菜单项都有自己的

li

——然后您可以将

ul

和

li

元素调整为

display:inline

，并按您喜欢的方式定位它们——下面是一个例子：@MikeDiglio谢谢。我能够在不使用li/ul的情况下对齐图像。他们给了我麻烦。唯一剩下的就是垂直居中。你能看到更新的代码吗：在你的

.topnav-nav

CSS上，你可以让它

显示：flex并添加对齐项目：居中
@MikeDiglio必须添加到.top nav div，但这成功了。谢谢
    body {
    margin:0;
    font-family: 'Open Sans', sans-serif;
}

.topnav {
    margin: 0 auto;
    width: 100%;
    background-color: purple;
    overflow: hidden;
    position: relative;
}

.topnav nav{
    display:block;
    overflow: auto;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 100%;
    float:center;
    background: -webkit-linear-gradient(left, transparent, black, black, transparent); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, transparent, black,black, transparent); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, transparent, black,black, transparent); /* For Fx 3.6 to 15 */
    background: linear-gradient(to right, transparent, black, black, transparent); /* Standard syntax (must be last) */
}

.topnav nav a {
    float: left;
    color: white;
    width:10%;
    text-align: center;
    text-decoration: none;
    font-size: 17px;
    word-wrap:true;
    background-color: red;
    height: 100%;;
}

.topnav nav img {
    color: white;
    width:45%;
    float: center;
}

.topnav nav a:hover {
    color: #008ed2;
}

.topnav .icon {
    display: none;
}

@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }

}