问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

学习html5中的nav标签 放入一个img标签和a标签，但是两者就是不对齐，原因是什么呢，css菜鸟一枚，不吝赐教，抱拳~

头像
hell_c
    1131817

    图片描述

    如上图所示
    代码如下：
    <!DOCTYPE html>
    <html>
    <head>

    <meta charset="utf-8">
<title>首页</title>
<style type="text/css">
    .bird-style{
        margin:15px 0 0 0;
        height: 40px;
        border:1px solid red;
    }
    .nav-style{
        height: 65px;
        border:1px solid blue;
    }
    a{
        font-size: 40px;
        color: black;
        text-decoration: none;
        width:30px;
        border:1px solid green;

    }
</style>

    </head>
    <body>
    <nav class="nav-style">

    <img class="bird-style" src="/nav/img/bird.jpg">
<a href="#">首页</a>
<a href="#">产品</a>
<a href="#">文档</a>
<a href="#">帮助</a>

    </nav>
    </body>
    </html>

    css
    阅读 6k
    5 个回答
    得票最新
    头像
    恋空
      17
      ✓ 已被采纳

      把a标签的宽度去掉，行内元素设置宽高是无效的。
      图片不要padding和margin了。
      a和图片的vertical-align都设为middle试试看。

      头像
      letxxt
        531511

        给图片添加vertical-align:middle属性

        头像
        hell_c
          1131817

          我改进了一些
          <!DOCTYPE html>
          <html>
          <head>

          <meta charset="utf-8">
<title>首页</title>
<style type="text/css">
    .bird-style{
    
        height: 40px;
    
    }
    .nav-style{
        background-color:#1F375A;  
        height: 65px;
    
    }
    a{

        font-size: 40px;
        font-family: "楷体";
        color: white;
        padding: 0 5px 0 5px;
        text-decoration: none;
        width:30px;
        height: 40px;
        letter-spacing: 0px;

              }
    .div-style{
        float:left;
        padding-top: 12px;
    }
</style>

          </head>
          <body>
          <nav class="nav-style">

          <div class="div-style">
<img class="bird-style" src="/nav/img/bird.jpg">
</div>
<div class="div-style">
<a href="#">首页</a>
<a href="#">产品</a>
<a href="#">文档</a>
<a href="#">帮助</a>
</div>

          </nav>
          </body>
          </html>
          图片描述

          但觉得还是有点不对齐，各位有什么建议呢，上面哥们的方案试过
          结果是这样的
          图片描述

          头像
          Hayden
            2
            新手上路，请多包涵

            这是因为图片与文字的vertical-align默认值都为baseline,图片的baseline是图片的底边框，而文字的baseline却不是文字的底部而是英文四线三格的第三条线，所以可以看到文字相对图片下沉，可以试试给图片的vertical-align几个像素的偏移量，还有其他的方法，我记得不太清了，详细的慕课网上张鑫旭老师的深入理解css系列课程有一课专门讲过

            头像
            宁静致远9418
              1713

              实在不行，就用position来定位吧

              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题