26-Icon图标和文字垂直居的N种解决方法

卖女孩的小火柴..

2024-04-23 帮助1人

我们经常会遇到图标和文字不能对齐的情况。

<div class="box">
    <img class="icon" src="restart.png"/>
    <span class="text">垂直居中</span>
</div>
<style>
	.icon{
		width:18px;
		height:20px;
		}
	.text{
		font-size:12px;
	     }
</style>

出来的结果：
学新通
下面有3中方法可以解决这个问题：

1、浮动法，将文字和图片所在的块全部浮动。给文字加line-height

<body>
        <div class="box">
            <img class="icon" src="./images/icon_aboutus.png" />
            <span class="text">垂直居中</span>
        </div>
    </body>
    <style>
        .box {
            /* border: 1px solid #000; */
            overflow: hidden;
        }
        .icon {
            float: left;
            width: 20px;
            height: 20px;
        }
        .text {
            float: left;
            padding: 0 5px 0 5px;
            font-size: 14px;
            line-height: 20px;
        }
    </style>

学新通

2、绝对定位法

<body>
        <div class="box">
            <img class="icon" src="./images/icon_aboutus.png" />
            <span class="text">垂直居中</span>
        </div>
    </body>
    <style>
		.box {
            position: relative;
        }
        .icon {
            width: 20px;
            height: 20px;
        }
        .text {
            position: absolute;
            font-size: 14px;
            line-height: 20px;
        }
    </style>

3、vertical-align法(不建议使用有bug，文字的大小必须小于icon的高)

    <body>
        <div class="box">
            <img class="icon" src="./images/icon_aboutus.png" />
            <span class="text">垂直居中</span>
        </div>
    </body>
    <style>
        .box {
            border: 1px solid #000;
        }
        .icon {
            width: 20px;
            height: 20px;
            vertical-align: middle;
        }
        .text {
            font-size: 13px;
        }
    </style>

4、将图片设置成文字的背景。
待补充…

这篇好文章是转载于：学新通技术网

26-Icon图标和文字垂直居的N种解决方法

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐