效果图:

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

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种实现小图标与文字水平对齐的方式的更多相关文章

  1. android Editview中加小图标或者文字实现

    关于这个问题,如果只是加小图标的话,已经提供了很好的支持,drawableLeft属性就可以设置左边的小图标,类推,右边也可以 不过如果你要加的是文字,我找了下,没有相应的属性,我们只能通过转换思路去 ...

  2. iOS开发之--使用storyboard下,tabbar小图标和文字颜色的设置

    在开发项目的时候,如果是使用故事版设计的架构,那么在设置tabbar小图标的时候,可能会出现一点小问题, 成功的设置方法如下: 1.设置seleectedImage和image,其实就是非选中状态的图 ...

  3. 在input内添加小图标或文字(元/月)等

    文字: <td class="formValue"> <div class="input-group"> <input id=&q ...

  4. EasyUI portal自定义小图标,不是用js方式加载

    <script src="~/Scripts/jquery.portal.js"></script> <script> $(function ( ...

  5. Android 自己定义 TextView drawableTop 图标与文字左对齐(效果图)

    public class DrawableTopLeftTextView extends TextView { private Paint mPaint; private float fFontHei ...

  6. html 图标和文字一行对齐

    原图: 效果图: 备注:vertical-align:middle <div> <p class="time tl-size12" style="pad ...

  7. css:图标与文字对齐的两种方法

    (好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向 ...

  8. CSS图标与文字对齐的两种方法

    在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, <div> <img src=&q ...

  9. win10 系统右键菜单不显示文字(只有小图标)修复方法

    如下图,win10点击鼠标右键调出菜单时,看不到菜单的文字,只显示了小图标. 解决方法: Cortana 搜索 cmd ,看到 命令提示符,右键,选择 以管理员身份运行. 在命令提示符里输入以下命令, ...

随机推荐

  1. php执行方式对比:mod_php&php-fpm

    mod_php 1.是apache的附属包,apache死掉后php也会死掉 2.稳定性差,php出错服务器进程也会受影响 php-fpm       1.和nginx是两个独立的个体. 2.php- ...

  2. Sql语法树示例 select username, ismale from userinfo where age > 20 and level > 5 and 1 = 1

    select username, ismale from userinfo where age > 20 and level > 5 and 1 = 1 --END-2019年9月5日17 ...

  3. MySQL 对 IP 字段的排序问题

    MySQL 对 IP 字段的排序问题 问题描述 想对一张带有 IP 字段的表,对 IP 字段进行升序排序,方便查看每个段的 IP 信息. 表结构和表数据如下: SET NAMES utf8mb4; ; ...

  4. golang实现四种排序(快速,冒泡,插入,选择)

    本文系转载 原文地址: http://www.limerence2017.com/2019/06/29/golang07/ 前面已经介绍golang基本的语法和容器了,这一篇文章用golang实现四种 ...

  5. boost::multi_index 提供一种千人在线即时排行榜的设计思路

    原文地址: http://www.limerence2017.com/2019/06/23/cpp01/ 做游戏或金融后台开发,经常会遇到设计开发排行榜的需求.比如玩家的充值排行,战力排行等等.而这种 ...

  6. JavaScript(3):JSON

    <!DOCTYPE html> <html> <body> <p>JSON</p> <script> // JSON 值可以是: ...

  7. document.documentElement 和 document.body

    MDN : The Document.documentElement read-only property returns the Element that is the root element o ...

  8. 使用robotframework做接口测试二——处理响应数据

    初使用RequestsLibrary做接口测试时,你会不会感到困惑,为什么会有${resp.content}, ${resp.status_code}这样的写法,这个status_code什么鬼,f5 ...

  9. CommonJS、AMD、CMD、ES6——JavaScript模块化

    CommonJS规范:Node AMD规范:RequireJS CMD规范:SeaJS ES6模块

  10. 【机器学习理论】概率论与数理统计--假设检验,卡方检验,t检验,F检验,方差分析

    显著性水平α与P值: 1.显著性水平是估计总体参数落在某一区间内,可能犯错误的概率,用α表示. 显著性是对差异的程度而言的,是在进行假设检验前确定的一个可允许作为判断界限的小概率标准. 2.P值是用来 ...