老师帮我看一下这个图片的垂直居中怎么不行呢?

来源:2-2 编程练习

春萍401599

2020-07-05 11:25:51

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

<title>CSS布局</title>

<style type="text/css">

*{

margin: 0;

padding:0;

}

/*此处写代码*/

body{

    min-width:1200px;

}

.header{

    width:100%;

    height:100px;

    background:#eee;

}

    .logo{

    float:left;

}

    .logo img{

    padding-left:10px;

    line-height:100px;

}

.nav{

    float:right;

    z-index:3;

}

.nav ul{

    list-style:none;

    margin-right:100px;

}

.nav ul li{

    float:left;

    width:80px;

    height:100px;

    line-height:100px;

    font-weight:bolder;

    font-size:15px;

}

</style>

</head>

<body>

<!-- 此处写代码 -->

<div class="header">

    <div class="logo">

        <img src="http://climg.mukewang.com/595dd5120001736902000080.png" alt="logo"/>

    </div>

    <div class="nav">

        <ul>

<li>首页</li>

<li>图片</li>

<li>视频</li>

<li>手记</li>

</ul>

    </div>

</div>

</body>

</html>


写回答

1回答

好帮手慕码

2020-07-05

同学你好,line-height是设置行间距的,所以一般用来设置文字垂直居中。如果想让图片实现垂直居中,建议修改:

(图片的高度是80px ,父级的高度是100 ,(100-80)/2 )

http://img.mukewang.com/climg/5f014e540904547603240125.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 40143 问题

查看课程