图片和文字对齐

图片和文字对齐

方式一、添加“vertical-align:middle”属性

  • 
        <li >
            <img src="logo.jpg" alt="" style="vertical-align:middle"><a href="">找回密码</a>
        </li>
    
    		
  • 方式二、把图片设置为背景图片

  • 
        <style>
        .haokan{
            width: 300px;
            height: 50px;
            line-height: 50px;
            background-color: red;
            background: url(logo.jpg) no-repeat left center;
            
        }
        .haokan a{
                display: block;
                margin-left: 116px;
            }
    
        </style>
      
        <li class="haokan">
            <a href="">找回密码</a>
        </li>
    
    		
  • 方式三、分别把图片和文字放入不同的li中

  • 
        <style>
        .lis .imgs{
            display: inline-block;
            vertical-align: middle;
        }
        .lis .infos{
            display: inline-block;
        }
        </style>
    
        <li class="lis">
            <li class="imgs"><img src="logo.jpg" alt=""></li>
            <li class="infos"><a href="">找回密码</a></li>
        </li>
    
    		
  • 标签: