logo图.header-left设置浮动后如何设置垂直居中？

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">   
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>Career Builder</title>
</head>
<body>
    <!-- 导航栏 -->
    <div class="header">
        <!-- 左边logo -->
        <div class="header-left">
            <img src="images/logo.png" alt="logo">
        </div>
        <!-- 右边导航目录 -->
        <div class="header-right">
            <a href="#1">HOME</a>
            <a href="#2">ABOUT</a>
            <a href="#3">GALLERY</a>
            <a href="#4">FACULTY</a>
            <a href="#5">EVENTS</a>
            <a href="#6">CONTACT</a>
 
        </div>
    </div>
    <!-- banner区 -->
    <div></div>
    <!-- about区 -->
    <div></div>
    <!-- GALLERY区 -->
    <div></div>
    <!-- 页脚区 -->
    <div></div>
</body>
</html>

CSS：

*{
    padding: 0;
    margin: 0;
}
.header{
    height: 80px;
    background-color: #07cbc9;
    width:100%;
}
a{
    text-decoration:none;
    color:white;
}
.header-right a{
    padding-right: 16px;
    line-height: 80px;
}
.header-left{
    float:left;
    height:80px;
     
}
.header-right{
    float:right;
}
.header-left img{
    line-height: 80px;
 
}

localhost999 2020-07-04

源自：项目：网页布局案例 2-10 作业题

收起

2回答

好帮手慕粉回答被采纳获得+3积分 2020-07-04 13:47:45

同学你好，同学提供的这个方法是可以的呢。还有别的方法，例如定位什么的，但是没有同学的这个方法简单，所以同学使用这个就行了。

祝学习愉快~

收起回答

好帮手慕粉 2020-07-04 11:16:26

同学你好，在同学的代码中，图片的高度是等于父元素高度的：

父元素：

所以就可以看作已经实现垂直居中，不需要再设置了：

如果我的回答帮助了你，欢迎采纳。祝学习愉快~

收起回答

提问者 localhost999 #1

老师，我使用的logo图高度不等于父元素高度，作业素材里面的那个logo图

2020-07-04 11:24:26
提问者 localhost999 #2

我现在使用下面这个代码发现可以垂直居中，老师这方法是否可行？有更好的方法吗？ .header-left{ float:left; margin-left: 80px; margin-top: 16px; }

2020-07-04 11:26:28