已知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. 【从无到有】JavaScript新手教程——1.简介、变量和运算符

    今天带大家来学习一下在网页制作过程中很常用的JavaScript(简称JS).   一.JS的作用: 表单验证,减轻服务端的压力 添加页面动画效果 动态更改页面内容 Ajax网络请求 二.[使用JS的 ...

  2. js解析器(重要!)

    JavaScript有"预解析"的特性,理解预解析是很重要的,不然在实际开发中可能会遇到很多无法解析的问题,甚至导致程序bug的存在. #js预解析执行过程: 预解析:(全局作用域 ...

  3. Liunx的DHCP配置

    1.DHCP简介 (1)DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)是一个简化主机IP地址分配管理的TCP/IP标准协议,用户可以利用DHCP服 ...

  4. phpcms基础

    CSM基础(做中小型企业网站) 做一个企业站,三个页面比较重要1.首页2.列表页3.内容页 做企业站的流程:1.由美工出一张,设计效果图2.将设计图静态化3.开始安装CMS4.强模板文件放到CSM里面 ...

  5. python代码零散知识点

    1.用python读入csv文件 green_taxi1=pd.DataFrame(pd.read_csv('../../../../MatlabCode/data/green/green_tripd ...

  6. 在Ueditor / Umeditor中实现上传图片跨域

    近几天公司的后台管理需要图文编辑文章,但是ueditor提供的方法中,本地图片的上传是通过flash的方式处理的,且不支持跨域.若要在已经前后端分离的Angular项目中使用,需要做复杂的环境配置.跟 ...

  7. TreeSet小练习

    package 练习.test1; import java.util.Iterator; import java.util.TreeSet; /* 需求:将字符串中的数值进行排序. 例如String ...

  8. Android系统--输入系统（十二）Dispatch线程_总体框架

    Android系统--输入系统(十二)Dispatch线程_总体框架 1. Dispatch线程框架 我们知道Dispatch线程是分发之意,那么便可以引入两个问题:1. 发什么;2. 发给谁.这两个 ...

  9. 设置共享目录（主机win7，虚拟机Ubuntu）

    1.安装增强功能包 启动虚拟机后,在 设备 -> 分配光驱 选择VBoxGuestAdditions.iso增强包镜像(在virtualbox安装目录下) 在虚拟机中挂载光驱镜像: #mkdir ...

  10. scala练手之数字转汉字小工具

    输入数字,转换成汉字,在统计数据量时很好用,而输入数字转成大写汉字,可以用于填写收据报销单哦 下载链接 https://pan.baidu.com/s/1nv3Ci6l 效果图如下: 直接上代码 ob ...