老师好,我自己做一个网站,但不知道为什么最后加search图片的时候无法居中

老师好,我自己做一个网站,但不知道为什么最后加search图片的时候无法居中

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>导航页</title>

<style type="text/css">

/*清除CSS所有预设边距*/

*{margin: 0;

  padding:0}

        /*清楚list的标识*/

        ul{list-style: none;}

        /*a标签下划线*/

        a{text-decoration:none;}

        .container{width: 1200px;

                   margin: auto;}

        .header{width:1200px;

                background-color:#EEEEEE;

                border-radius:5px; 

                overflow: hidden;

                zoom:1;

                }

        .header .logo{

         height: 80px;

         margin-left:50px;

         float: left;

        }

        .header .nav{

         margin-right:250px;

            float: right;

            overflow: hidden;

            zoom:1;

        } 

        .search,.publish,.profile{

         height: 80px;

         float: right;

        }

        .search span{display: inline-block;

             height: 100%;

             vertical-align:middle;}

        /*float属性是不会继承父元素的*/  

        .header .nav li{

         float: left;

         margin-right:15px; 

        }


        .header .nav li a{

          padding: 0 20px;

          height: 80px;

          line-height: 80px;

          display: block;

          font-family:'微软雅黑';

          font-size:18px;

          color:black;

        }

        .header .nav li a:hover{

         color:white;

        }

</style>

</head>

<body>

     <div class="container">

      <!--页眉-->

      <div class="header">

      <div class="logo">

      <a href=""><img src="img/logo.png" height="80px" width="200px"></a>

      </div>

            <div class="publish"><img src=""></div>

      <div class="profile"><img src="" ></div>

      <div class="search"><span><img src="img/search.png" height="40px" width="190px"></span></div>

      <ul class="nav">

      <li><a href="#">作品</a></li>

      <li><a href="#">综合</a></li>

      <li><a href="#">企划</a></li>

      <li><a href="#">活动</a></li>

      </ul>

      </div>



        

     </div>

</body>

</html>

http://img1.sycdn.imooc.com//climg/5e3fd2bb09b771aa19120874.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕码 2020-02-10 09:31:53

同学你好,设置在行内和css中都可以实现效果。如在css中应该如下:

http://img1.sycdn.imooc.com//climg/5e40b27409c2d8b401660079.jpg

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

好帮手慕码 2020-02-09 18:19:31

同学你好,vertical-align是实现文字等行内元素实现基线对齐的,这里无法实现图片垂直居中。建议使用margin的方式去实现垂直居中的:

http://img1.sycdn.imooc.com//climg/5e3fdca609b36d0105620072.jpg

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

  • 提问者 慕雪9296518 #1
    谢谢老师,确实可用。这里想追问个问题,我的logo是偏大尺寸的,在css里设置了高度,宽度随图标宽度而定后,我发现logo看不到并且整个header的div扩大了,于是我在img本身设置了个高宽属性才实现页面正常。请问图片本身的宽高设置应该在css里还是img行内比较合适?如果是在css内,应该如何写
    2020-02-09 20:31:33
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师