效果图:

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. ILSpy C# language support status

    C# language support status Asynchronous methods 已经支持 Generalized async return types  还不支持 Async main ...

  2. pandas.Series.value_counts

    pandas.Series.value_counts Series.value_counts(normalize=False, sort=True, ascending=False, bins=Non ...

  3. ftp列出具体目录的所有目录,和目录按照文件类型列出

    package com.haiyisoft.cAssistantWeb.util; import java.io.IOException; import java.io.PrintWriter; im ...

  4. 4.HadoopMapRe程序设计

    1.介绍 2.基本构架与组件 3.基本算法

  5. rocketmq的windows版客户端的启动步骤

    一.下载RocketMQ首先,我们去下载RocketMQ,RocketMQ 是一个开源的东西,可以去github上面下载,地址是:https://github.com/alibaba/RocketMQ ...

  6. debian中安装pip

    sudo apt upate sudo apt-get install python3-pip

  7. java读取blob,clob转换为字符串

    直接上代码: package com.it.test; import java.io.BufferedReader; import java.io.StringWriter; import java. ...

  8. Linux :linux磁盘分区(普通分区2T以内),安装免安装版mysql(tar.gz)

    1.磁盘分区: 1 以root身份登录 查看磁盘信息(自行选择需要使用的磁盘,此处只需要了解信息) fdisk –l 创建新硬盘 fdisk /dev/vdb (决定使用哪个磁盘) 输入n回车,再输入 ...

  9. vtk画折线,并且禁止鼠标交互

    VTK画图,禁止鼠标拖动时滚动图形,鼠标滚轮滚动时放大/缩小图形的方法. renderLine.InteractiveOff(); 下面是VTK画折线的代码 // Create five points ...

  10. java程序加到系统托盘的方法

    package swingtest; import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; impor ...