实现图标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="# ...
随机推荐
- MongoDB基础教程系列--第八篇 MongoDB 副本集实现复制功能
为什么用复制 为什么要使用复制呢?如果我们的数据库只存在于一台服务器,若这台服务器宕机了,那对于我们数据将会是灾难,当然这只是其中一个原因,若数据量非常大,读写操作势必会影响数据库的性能,这时候复制就 ...
- CTR预估中的贝叶斯平滑方法（二）参数估计和代码实现
1. 前言 前面博客介绍了CTR预估中的贝叶斯平滑方法的原理http://www.cnblogs.com/bentuwuying/p/6389222.html. 这篇博客主要是介绍如何对贝叶斯平滑的参 ...
- 找到一个新的超好用的U盘启动制作工具了
有同事叫帮装电脑,弄个U盘说制作一个启动盘,结果一搜,出了“雨林木风”的主页. 太好用了,高手的产物,比以前找的方便一百倍.又简单,又实用,同步又下载好GHO文件.唯一 的问题是XP中用的GHO,好多 ...
- 商城项目实战 | 2.2 Android 仿京东商城——自定义 Toolbar (二)
本文为菜鸟窝作者刘婷的连载."商城项目实战"系列来聊聊仿"京东淘宝的购物商城"如何实现. 上一篇文章<商城项目实战 | 2.1 Android 仿京东商城 ...
- 修改linux系统时间和同步
date 查看当前时间 date -s 15:14:13 修改时间 cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 修改时区 yes cront ...
- 何为代理？jdk动态代理与cglib代理、spring Aop代理原理浅析
原创声明:本博客来源为本人原创作品,绝非他处摘取,转摘请联系博主 代理(proxy)的定义:为某对象提供代理服务,拥有操作代理对象的功能,在某些情况下,当客户不想或者不能直接引用另一个对象,而代理对象 ...
- BogoMIPS与calibrate_delay
在分析Arm+linux启动信息的时候.发现有一个信息竟然耗费了2s的时间,这简直是不能忍受的.这个耗时大鳄是什么东西哪,请看分析信息: [ 0.000000] console [ttyMT0] ...
- DirectFB 之 实例图像不断右移
/********************************************** * Author: younger.liucn@gmail.com * File name: imgro ...
- Spring Cloud构建微服务架构（一）服务注册与发现
Spring Cloud简介 Spring Cloud是一个基于Spring Boot实现的云应用开发工具,它为基于JVM的云应用开发中的配置管理.服务发现.断路器.智能路由.微代理.控制总线.全局锁 ...
- linux 内核的futex pi-support，即pi-futex使用rt_mutex委托
futex的pi-support,也就是为futex添加pi算法解决优先级逆转的能力,使用pi-support的futex又称为pi-futex.在linux内核的同步机制中,有一个pi算法的成例,就 ...