day3-3种实现小图标与文字水平对齐的方式

效果图：

1.使用小图标作为背景图实现

html：

     <div class="test">
            <ul>
                <li class="method1"><a href="#">背景图实现对齐</a></li>
                <li class="method2"><i class="icon"></i><a href="#">使用display实现对齐</a></li>
                <li class="method3"><i class="icon2"></i><a href="#">使用float浮动对齐</a></li>
            </ul>
        </div>

css代码：

/* 背景图实现图标与文字对齐 */
ul{
    list-style: none;
    /* background-color: aqua; */
}
a{
    text-decoration: none;
    color: black;
}
.method1{
    background-image: url(./photoNewsLeft2.gif);
    background-repeat: no-repeat;
    /* 使用padding-left解决背景图标与文字重合问题 */
    padding-left: 14px;
    /* 调整背景图位置使文字与背景图保持水平 */
    background-position: 0 6px;
}
.method1 a{
    margin-left: 5px;
}

2.使用display:inline-block实现

css代码：

/* 使用display:inline-block属性实现图标文字水平对齐 */
.icon{
    background-image: url(./photoNewsLeft2.gif);
    background-repeat: no-repeat;
    background-position: 0 0;
    padding-left: 5px;
    /* 设置为inline-block，块级元素设置宽高 */
    display: inline-block;
    width: 14px;
    height: 14px;
    /* vertical-align:设置行内元素的基线相对于该元素所在行的基线对齐，使图标与文字水平对齐 */
    vertical-align: middle;
}

该方法需要注意的是，当元素设置为display:inline-block时，该元素为块级元素，在只有背景图的情况下，需要给该元素设置宽高，使其有效显示；背景图无法撑起元素使其具有宽高

3.使用float实现

扫描二维码关注公众号，回复： 7480478 查看本文章

css代码：

/* 使用float实现图标与文字保持水平对齐 */
.icon2{
    background-image: url(./photoNewsLeft2.gif);
    background-repeat: no-repeat;
    background-position: 0 0;
    /* 当元素使用float的时候会自动转化为块级元素  需要设置宽高*/
    float: left;
    width: 14px;
    height: 14px;
    /* 使用margin-top调整图标位置，使其与文字保持水平 */
    margin-top: 6px;
}
.method3 a{
    float: left;
    margin-left: 5px;
}

此处该注意的是，当元素设置float属性后会自动转化为块级元素，需要给元素设置宽高，使icon背景图有效显示

注意：第一种方法之所以不用设置宽高，是因为第一种方法的背景图设置在了li元素上，而li元素有文字内容可以自动撑开，使背景图有效显示；后两种方法使用背景图的i元素无内容可撑开元素

总结：就个人而言，感觉第二种方法好用一些，宽高+vertical-align 可以很方便的调整图标与文字的垂直定位，使两者保持水平

如有不妥之处请指正

day3-3种实现小图标与文字水平对齐的方式

猜你喜欢