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

最新推荐文章于 2024-04-26 22:14:41 发布

卖女孩的小火柴..

最新推荐文章于 2024-04-26 22:14:41 发布

阅读量4.2k

点赞数 2

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_45348060/article/details/122044500

版权

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

<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>