实现图标Icon+文字在div里自动中心居中（水平垂直居中）
已知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里自动中心居中（水平垂直居中）的更多相关文章
- 实现div里的img图片水平垂直居中
body结构 <body> <div> <img src="1.jpg" alt="haha"> </div> ...
- 图片与文字在div里实现垂直水平都居中
第一种方法,利用盒布局实现 <style type="text/css">/*盒布局实现图片与文字水平垂直居中*/ .div1{ width: 100%; heig ...
- margin-bottom无效问题以及div里内容动态居中样式!
最近调前端样式时候,遇到一个需求,在中间文字不对等的情况下想让下面的操作文字距离底部对齐,如图: , 刚开始觉得使用margin-bottom就可以,后来发现只有margin-top是管用的,查了资料 ...
- 一个宽度不确定的DIV里放三个水平对齐的DIV，左右两个DIV宽度固定为100px，中间那个DIV自适应宽度
方法一:浮动 注意三个div的位置 <html><head> <meta charset="utf-8"> <style type=&q ...
- CSS实现文字和图片的水平垂直居中
关于文字和图片的水平垂直居中,在前端界绝对算是一个老生常谈的问题了,尤其是垂直居中,什么千奇百怪的解法都能想的出来.下面我就总结一些比较常用的方法: 一.文本的水平垂直居中: 1.水平居中: 是不是很 ...
- div 固定宽高 水平垂直居中方法
div固定宽高,水平垂直居中,根据所用单位不同,分成两种情况,分别是"px"和"%"情况. 例:将三层div做出三个边框,要求水平垂直居中.效果如图 情况一(单 ...
- 让div自适应浏览器窗口居中显示
今天做 banner 时发现一个问题,就是浏览器窗口水平拉伸时 banner 图未能居中,所以网上找了些资料,自己写了个小 demo html代码: <div class="div1& ...
- css实现高度或者宽度不固定的div元素垂直左右居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- icon图标和文字整体居中在button按钮
icon图标和文字整体居中在button按钮 icon图标和文字整体居中 一般我们常做的button按钮是文字居中 现在这个需要icon图标和文字一起居中在背景色 <a href="# ...
随机推荐
- maven的web项目手工发布
网上有很多人都认为maven的web项目发布时,要用这个命令那个命令,太麻烦了,用纯手工打造发布更为方便. 第一步,导出你所在项目maven的依赖包. 打开cmd窗口执行命令:mvn dependen ...
- less学习笔记（一）
less的写法如下 .content { ul{ list-style: none; } li{ height: 25px; line-height: 25px; padding-left: 15px ...
- 从零开始用 Flask 搭建一个网站（三）
从零开始用 Flask 搭建一个网站(二) 介绍了有关于数据库的运用,接下来我们在完善一下数据在前端以及前端到后端之间的交互.本节涉及到前端,因此也会讲解一下 jinja2 模板.jQuery.aja ...
- Ubuntu16.04安装NVIDIA驱动时的一些坑与解决方案
这几天在新购置的笔记本上部署工作环境,在安装NVIDIA驱动的时候遇到了不少坑,重装了很多次,在Ubuntu论坛以及其他资料源看了很多大牛的分析,最终终于解决了一个又一个问题,过程比较艰辛,所以决定写 ...
- Java高级特性（基础）
1.StringBuffer.StringBuilder和String一样,也用来代表字符串.String类是不可变类,任何对String的改变都 会引发新的String对象的生成:StringBuf ...
- Code First约定-Fluent API配置
转自:http://blog.163.com/m13864039250_1/blog/static/2138652482015283397609/ 用Fluent API 配置/映射属性和类型 简介 ...
- 将linux的HOME目录下的文件夹名字改回英文
为了使用起来方便,装了Ubuntu中文版,自然在home文件里用户目录的“桌面”.“图片”.“视频”.“音乐”……都是中文的.很多时候都喜欢在桌面上放一些要操作的文件,linux里命令行操作又多,难免 ...
- MySQL中binlog参数:binlog_rows_query_log_events
在使用RBR也就是行格式的时候,去解析binlog,需要逆向才能分析出对应的原始SQL是什么,而且,里面对应的是每一条具体行变更的内容.当然,你可以开启general log,但如果我们需要的只是记录 ...
- Andriod中自定义Dialog样式的Activity点击空白处隐藏软件盘（Dialog不消失）
一.需求触发场景: 项目中需要出发带有EditText的Dialog显示,要求在编辑完EditText时,点击Dilog的空白处隐藏软键盘.但是Dialog不会消失.示例如下: 二.实现方法: 发布需 ...
- summerDao-比mybatis更强大无需映射配置的dao工具
summerDao是summer框架中的一个数据库操作工具,项目地址:http://git.oschina.net/xiwa/summer. 怎么比mybatis更强大,怎么比beetlsql更简单, ...