左边图标右边文字,在div里居中
图1
图2
css制作: 左边一个小图标,右边文字,两者之间一点间隔,再在一个div 里面居中显示。(div不设置宽度)
第一种做法:
图3
图4
.m-sn {
font-size: 12px;
color: #999;
background-color: #FFF;
line-height: 22px;
height: 22px;
padding-bottom: 24px;
text-align: center; // 这是最常用的
}
.m-sn span {
background: url('http://img.baidu.com/img/iknow/exp/article/article-sprite-v1.png') no-repeat scroll -241px -278px transparent;
display: inline-block; // *
width: 18px;
height: 15px;
margin-right: 2px;
vertical-align: middle; // *
}
第二种做法:
图5
图6
其他的:
-----------o
其实 ,每个所谓li的背景,却是每个li的最后一个元素a元素设置的背景,position设置的是absolute,往上找li的position又是relative(这便是此处a的作用了) :
-----------o
哈哈,本章要记录的是章头说的两种方法,后面的是随手记得。
左边图标右边文字,在div里居中的更多相关文章
- 实现图标Icon+文字在div里自动中心居中(水平垂直居中)
已知div行高设置text-align:center文字会自动居中. 通过:before来设置icon的地址和高宽. 需要设置图片默认的垂直居中条件,与文字一致,为text-bottom. 设置图片行 ...
- css 如何使图片与文字在div中居中展示?
1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...
- 图片与文字在div里实现垂直水平都居中
第一种方法,利用盒布局实现 <style type="text/css">/*盒布局实现图片与文字水平垂直居中*/ .div1{ width: 100%; heig ...
- <转载>使CSS文字图片div元素居中方法之水平居中的几个方法
文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...
- [html][css]让文字在div中居中的方法[转]
转至:http://dreamweaver.abang.com/od/divcss/a/vertical-align.htm 一.行高(line-height)法 如果要垂直居中的只有一行或几个文字, ...
- 文字在div中居中
话不多说,看代码 div class="div1"> <span class="span2">等级分类法拉盛说的分离卡萨丁</span& ...
- Beamer中左边画图, 右边文字解释
\begin{columns} \column{.4\textwidth} \begin{figure} \centering % Requires \usepackage{graphicx} \in ...
- button 左边图片右边文字样式
状态值 : 正常 状态值 : 选中 #pragma mark - buttonPress- (void)buttonPress:(UIButton * )sender { if ( ...
- UIButton左边图片右边文字的做法
UIImage *yuyinImage = [UIImage imageNamed:@"yuyin.png"]; [soundButton setImage:yuyinImage ...
随机推荐
- Ogre代码学习之1——Ogre中地形lod的基础:deltaHeight的计算
Ogre的地形系统中的重要概念:高度差,英文HeightDeltas,表示某个完整细节中的顶点,在某个它被隐去的lod中被插值之后的高度和原始高度(即高度图中的高度)之差. DeltaHeight = ...
- JVM监控和Java应用程序调试
JConsole.VisualVM监控JVM(JMX) JAVA_OPTS后加:-Dcom.sun.management.jmxremote.port=8999 -Dcom.sun.managemen ...
- 在windows下新建maven项目
1.拷贝settings到.m2文件下 2.修改文件 3.新建Project项目 4.转换为maven项目 config下转换 5.拷贝pom文件 6.新建目录 src/main/java src/m ...
- php实现数字格式化,数字每三位加逗号的功能函数
原地址:http://www.jb51.net/article/73781.htm php实现数字格式化,数字每三位加逗号的功能函数,具体代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 ...
- windows在cmd执行svn 命令
1. 使用svn 命令行工具. 找到http://www.visualsvn.com/downloads/ 下载Apache Subversion command line tools,这是一个可以在 ...
- TCP/IP网络编程中socket的行为
一. read/write的语义:为什么会阻塞? 先从write说起: #include <unistd.h>ssize_t write(int fd, const void *buf, ...
- 我的新发现:AVL树旋转的一个特性
关于AVL树旋转的代码网络上铺天盖地. 一些经典的实现方法如下: AVLTree SingleLeftRotation(AVLTree A) { AVLTree B = A->left; A-& ...
- Prism 5 + MEF中的ModuleCatalog.CreateFromXaml问题
protected override IModuleCatalog CreateModuleCatalog() { return Microsoft.Practices.Prism.Modularit ...
- iOS 杂记
一,demo 1,视图跳转 MaryPopin: https://github.com/Backelite/MaryPopin 2,Nimbus是一个开源的iOS框架,比起Three20,Nimbu ...
- ruby on rails on windows
这次想系统学会rails,最终目标是将redmine改造成顺手的工具,主要的手段就是开发redmine插件.虽然网上都推荐使用类Unix系统,可手头只有win7系统,就安装了. 难免会遇到这样那样的问 ...