logo部分(橙色背景部分)如何垂直居中?

来源：2-2 编程练习

qq_夜_71

2019-05-31 21:12:57

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link href="css/reset.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
 .container {
            width: 1100px;
 background: black;
 height: 80px;
 margin: 0 auto;
 color: white;
 padding-left: 50px;
 padding-right: 50px;
 }

        .left {
            float: left;
 height: 60px;
 width: 150px;
 margin: auto 0;
 background: orange;
 }

        .right {
            float: right;
 }

        .container > nav > a {
            width: 100px;
 height: 75px;
 display: block;
 text-align: center;
 line-height: 75px;
 float: right;
 }

        .container > nav > a:nth-child(1) {
            background: red;
 }

        .container > nav > a:nth-child(2) {
            background: green;
 }

        .container > nav > a:nth-child(3) {
            background: blue;
 }

        .container > nav > a:nth-child(4) {
            background: orange;
 }

        .container > nav > a:hover {
            padding-bottom: 5px;
 }
    </style>
</head>
<body>
<header>
    <div class="container">
        <div class="left">
            <img src="http://climg.mukewang.com/582e5f160001b17100400040.png"/>
            <span>MYMOOC</span>
        </div>
        <nav class="right">
            <a>西瓜</a>
            <a>哈密瓜</a>
            <a>菠萝</a>
            <a>可乐</a>
        </nav>
    </div>
</header>

</body>
</html>

写回答

1回答