Question

I want to create a simple header with 4 links and an image. Total width should be 85%. Other 15% should be spilt between leading and trailing spacing.

Image should be 45%.

Each link should be 10%. should be vertically centered and word wrapped.

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

Here is what i have so far. For some reason the links all group on one side and the image on another.

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>

CSS

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

}

Can someone help fix this. Here is the jfiddle link.

image centered within 6 links in the header

0 个答案: