已知div行高设置text-align:center文字会自动居中。

通过:before来设置icon的地址和高宽。

需要设置图片默认的垂直居中条件，与文字一致，为text-bottom。

设置图片行级显示。

<!Doctype html>
<html>
<head>
<style>
body{margin:0;padding:0;}
.con{position:absolute;width:500px;height:50px;border:1px red solid;
line-height:50px;color:green;text-align:center;
}
.txt{font-size:20px;}
.txt:before{
content:'111';
background-image:url('icon.png');
background-size:20px 20px;
vertical-align:text-bottom;
display:inline-block;
width:20px;
height:20px;
border:0;
top:0;
left:0;
}
</style>
</head>
<body>
<div class="con">
<span class="txt">我是三哥四哥五哥一个字</span>
</div>
</body>
</html>

实际效果，图标和文字会自动在div里中心居中

实现图标Icon+文字在div里自动中心居中（水平垂直居中）的更多相关文章

  1. 实现div里的img图片水平垂直居中

    body结构 <body> <div> <img src="1.jpg" alt="haha"> </div> ...

  2. 图片与文字在div里实现垂直水平都居中

    第一种方法,利用盒布局实现   <style type="text/css">/*盒布局实现图片与文字水平垂直居中*/ .div1{ width: 100%; heig ...

  3. margin-bottom无效问题以及div里内容动态居中样式!

    最近调前端样式时候,遇到一个需求,在中间文字不对等的情况下想让下面的操作文字距离底部对齐,如图: , 刚开始觉得使用margin-bottom就可以,后来发现只有margin-top是管用的,查了资料 ...

  4. 一个宽度不确定的DIV里放三个水平对齐的DIV，左右两个DIV宽度固定为100px，中间那个DIV自适应宽度

    方法一:浮动  注意三个div的位置 <html><head> <meta charset="utf-8"> <style type=&q ...

  5. CSS实现文字和图片的水平垂直居中

    关于文字和图片的水平垂直居中,在前端界绝对算是一个老生常谈的问题了,尤其是垂直居中,什么千奇百怪的解法都能想的出来.下面我就总结一些比较常用的方法: 一.文本的水平垂直居中: 1.水平居中: 是不是很 ...

  6. div 固定宽高 水平垂直居中方法

    div固定宽高,水平垂直居中,根据所用单位不同,分成两种情况,分别是"px"和"%"情况. 例:将三层div做出三个边框,要求水平垂直居中.效果如图 情况一(单 ...

  7. 让div自适应浏览器窗口居中显示

    今天做 banner 时发现一个问题,就是浏览器窗口水平拉伸时 banner 图未能居中,所以网上找了些资料,自己写了个小 demo html代码: <div class="div1& ...

  8. css实现高度或者宽度不固定的div元素垂直左右居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. icon图标和文字整体居中在button按钮

    icon图标和文字整体居中在button按钮 icon图标和文字整体居中 一般我们常做的button按钮是文字居中 现在这个需要icon图标和文字一起居中在背景色 <a href="# ...

随机推荐

  1. ubuntu12.04下编译chrome

    1,直接下载压缩包: http://chromium-browser-source.commondatastorage.googleapis.com/chromium_tarball.html 2,安 ...

  2. 关于for()循环使用过程中遇到的问题（俄罗斯方块游戏中遇到的问题）

    for循环的定义: for(参数1:参数2:参数3),参数1通常是初始化参数的,参数2是判断,参数3是对参数的操作.这三个参数都不是必须的. 这里想说的是,参数1的使用:比如下列语 int nLine ...

  3. 每天一个linux命令（62）：sh命令 /Linux中执行shell脚本的4种方法总结

    bash shell 脚本的方法有多种,现在作个小结.假设我们编写好的shell脚本的文件名为hello.sh,文件位置在/data/shell目录中并已有执行权限. 方法一:切换到shell脚本所在 ...

  4. （转）Python 遍历List三种方式

    转自: http://www.cnblogs.com/pizitai/archive/2017/02/14/6398276.html # 方法1 print '遍历列表方法1:' for i in l ...

  5. Filter execution threw an exception 错误

    Filter execution threw an exception 错误,我在web.xml中配置了一个filter用spring来解决懒加载的问题,为什么就会包这个错 java.lang.NoS ...

  6. R中基本统计图

    一.条形图 1.安装包install.packages("vcd"); library(vcd);count<-table(Arthritis$Improved);#tabl ...

  7. CF #CROC 2016 - Elimination Round D. Robot Rapping Results Report 二分+拓扑排序

    题目链接:http://codeforces.com/contest/655/problem/D 大意是给若干对偏序,问最少需要前多少对关系,可以确定所有的大小关系. 解法是二分答案,利用拓扑排序看是 ...

  8. Rookey.Frame v1.0 视频教程发布了

    经过昨天几个小时的折腾, Rookey.Frame v1.0开发视频教程终于发布了,由于是第一次做视频有很多地方做的不够好,后续我会慢慢改进,争取将视频教程做好. 本期发布视频: (一)Rookey. ...

  9. 实时Android语音对讲系统架构

    本文属于Android局域网内的语音对讲项目系列,<通过UDP广播实现Android局域网Peer Discovering>实现了局域网内的广播及多播通信,本文将重点说明系统架构,音频信号 ...

  10. dotnetcore中的IOptionsSnapshot<>的自动更新原理

    1.首先讲讲ChangeToken.OnChange方法: 原理是给一个CancellationToken注册一个消费者委托,调用CancellationToken的Cancel的时候会调用这个Can ...