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实现
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种实现小图标与文字水平对齐的方式的更多相关文章
- android Editview中加小图标或者文字实现
关于这个问题,如果只是加小图标的话,已经提供了很好的支持,drawableLeft属性就可以设置左边的小图标,类推,右边也可以 不过如果你要加的是文字,我找了下,没有相应的属性,我们只能通过转换思路去 ...
- iOS开发之--使用storyboard下,tabbar小图标和文字颜色的设置
在开发项目的时候,如果是使用故事版设计的架构,那么在设置tabbar小图标的时候,可能会出现一点小问题, 成功的设置方法如下: 1.设置seleectedImage和image,其实就是非选中状态的图 ...
- 在input内添加小图标或文字(元/月)等
文字: <td class="formValue"> <div class="input-group"> <input id=&q ...
- EasyUI portal自定义小图标,不是用js方式加载
<script src="~/Scripts/jquery.portal.js"></script> <script> $(function ( ...
- Android 自己定义 TextView drawableTop 图标与文字左对齐(效果图)
public class DrawableTopLeftTextView extends TextView { private Paint mPaint; private float fFontHei ...
- html 图标和文字一行对齐
原图: 效果图: 备注:vertical-align:middle <div> <p class="time tl-size12" style="pad ...
- css:图标与文字对齐的两种方法
(好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向 ...
- CSS图标与文字对齐的两种方法
在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, <div> <img src=&q ...
- win10 系统右键菜单不显示文字(只有小图标)修复方法
如下图,win10点击鼠标右键调出菜单时,看不到菜单的文字,只显示了小图标. 解决方法: Cortana 搜索 cmd ,看到 命令提示符,右键,选择 以管理员身份运行. 在命令提示符里输入以下命令, ...
随机推荐
- ILSpy C# language support status
C# language support status Asynchronous methods 已经支持 Generalized async return types 还不支持 Async main ...
- pandas.Series.value_counts
pandas.Series.value_counts Series.value_counts(normalize=False, sort=True, ascending=False, bins=Non ...
- ftp列出具体目录的所有目录,和目录按照文件类型列出
package com.haiyisoft.cAssistantWeb.util; import java.io.IOException; import java.io.PrintWriter; im ...
- 4.HadoopMapRe程序设计
1.介绍 2.基本构架与组件 3.基本算法
- rocketmq的windows版客户端的启动步骤
一.下载RocketMQ首先,我们去下载RocketMQ,RocketMQ 是一个开源的东西,可以去github上面下载,地址是:https://github.com/alibaba/RocketMQ ...
- debian中安装pip
sudo apt upate sudo apt-get install python3-pip
- java读取blob,clob转换为字符串
直接上代码: package com.it.test; import java.io.BufferedReader; import java.io.StringWriter; import java. ...
- Linux :linux磁盘分区(普通分区2T以内),安装免安装版mysql(tar.gz)
1.磁盘分区: 1 以root身份登录 查看磁盘信息(自行选择需要使用的磁盘,此处只需要了解信息) fdisk –l 创建新硬盘 fdisk /dev/vdb (决定使用哪个磁盘) 输入n回车,再输入 ...
- vtk画折线,并且禁止鼠标交互
VTK画图,禁止鼠标拖动时滚动图形,鼠标滚轮滚动时放大/缩小图形的方法. renderLine.InteractiveOff(); 下面是VTK画折线的代码 // Create five points ...
- java程序加到系统托盘的方法
package swingtest; import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; impor ...