img图片和文字上下排放文字出现下移无法垂直居中

最新推荐文章于 2023-06-01 11:48:46 发布

redy_

最新推荐文章于 2023-06-01 11:48:46 发布

阅读量823

点赞数

分类专栏：静态页面文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_41932272/article/details/125318049

版权

静态页面专栏收录该内容

14 篇文章 0 订阅

订阅专栏

code

 <a href="#" class="topbar-download">下载app
     <span class="appcode">
         <img src="./images/icon/appcode.png" alt="">
         小米商城APP                    
     </span>
 </a><span class="shugang">|</span>


.topbar-download:hover .appcode{
    background-color: white;
    box-shadow: 0px 0px 5px rgb(205, 205, 205);
    display: block;
}
.appcode{
    text-align: center;
    width: 124px;
    line-height: 14px;
    color: black;
    display: none;
}
.appcode img{
    width: 90px;
    height: 90px;
    margin: 18px 17px 12px 17px;
}

文字偏下
在这里插入图片描述
没有找到解决办法，通过设置图片和文字的包围元素span的padd-bottom实现padding-bottom: 12px;
修改后的css代码

.topbar-download:hover .appcode{
    background-color: white;
    box-shadow: 0px 0px 5px rgb(205, 205, 205);
    display: block;
}
.appcode{
    padding-bottom: 12px;
    position: absolute;
    left: 888px;
    text-align: center;
    font-size: 14px;
    width: 124px;
    line-height: 14px;
    color: black;
    display: none;
}
.appcode img{
    width: 90px;
    height: 90px;
    margin: 18px 17px 12px 17px;
}