关键词：
最近在开发微信公众号的时候遇到图片与文字居中的问题。例如我们要实现类似以下这样效果：
或者
。
为了实现这样的写法，同时兼容ios与安卓端，我采用了以下三种方法来实现（以下代码我只写主要的属性，具体样式大家各自根据自己需求添加）：
例如：
1 <div style="display:table；vertical-align: middle;"> 2 <span class="display:table-cell；vertical-align:middle"><img src="/Images/user/shoujinotice.png" width="12" height="12" ></span> 4 <span class="display:table-cell；vertical-align:middle">文字</span> 5 </div>
通过这样的CSS样式组合实现。
二、利用背景实现；
例如：
<style>
div{background:
- background-size:
- display:
- padding-left:
- color:
</style>
<div>文字</div>
通过背景引用图片，然后利用padding-left属性，让文字不遮挡图片；如果遇到图片偏离，我们还可以利用background-position属性来调整图片位置。
三、利用定位来解决。
<style>
div{
position:relative;
padding-left:
}
div img{
position:absolute;
top:0;
left:4px
}
</style>
<div style="position:relative"> <img src="/Images/user/shoujinotice.png" width="12" height="12" >
文字 </div>
利用定位把照片固定住，padding-left让文字不遮住照片实现。
PS:以上CSS样式只写关键属性，具体样式根据不同需求自行调整。
本人只列举三种方法如果有何疑问或者本人写错之类的，欢迎大家指点讨论！
htmlcss图片居中(水平居中和垂直居中)，移动端图片预览
做网站的时候，经常会遇到因图片宽高比率不一致导致图片显示方式有问题。 1、在图片宽高未知的情况下，图片上下左右居中 我以前的博客文章有写过，就不再重复了。博客地址，效果预览地址（欢迎copy） 上面... 查看详情
css实现文字和图片的水平垂直居中
关于文字和图片的水平垂直居中，在前端界绝对算是一个老生常谈的问题了，尤其是垂直居中，什么千奇百怪的解法都能想的出来。下面我就总结一些比较常用的方法： 一、文本的水平垂直居中： 1、水平居中：是... 查看详情
转图片多行文字的水平垂直居中
...本文将会告诉你如何实现多行文字的垂直居中显示。关于图片垂直居中显示，想必很多写css的人都研究过，或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法，用font-size解决IE下垂直居中的问题，是个好方法吗？是的，... 查看详情
笔记uc浏览器中以及移动端浏览器中元素垂直居中的方法
关于css的垂直居中有很多方法，但是uc浏览器还真是一个移动端浏览器清流之中的泥石流！！最近在慕课网学习vuewebApp的制作，其中有一个是让元素内的文字与图标垂直居中电脑端的chrome和手机浏览器的默认浏览器打开都没有什... 查看详情
css绝对定位下的垂直居中
如图窗口左上角实现文字宽高不定的div中文字图片垂直居中主要问题是在div显示display:block的情况下，文字高度不定，没办法做到用像左边图片固定大小垂直居中的方法，top:50%来垂直居中一开始直接用display:flex来实现左... 查看详情
css实现垂直居中
...通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。方法1：table-cellhtml结构：<divclass="boxbox1"><span>垂直居中</span></div>css：.box1{display:table-cell;vertical- 查看详情
图片垂直居中的方法（适合只有一行文字和图片）
1、父盒子的行高设置为父盒子的高度。2、给图片设置 display:inline-block; vertical-align:middle;最终效果如下: 查看详情
文字图片居中
...两行或更多行的垂直居中对齐呢？实现的关键是把文字当图片处理。用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中即可。核心css... 查看详情
纯css实现垂直居中的几种方法
...通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。方法1：table-cellhtml结构： <div class="boxbox1"> < 查看详情
纯css实现垂直居中的几种方法
...通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。方法1：table-cellhtml结构：123<divclass="boxbox1"> <span&g 查看详情
移动端：移动端页面布局(代码片段)
移动端页面布局一、水平居中行内元素 text-align:center;块级元素1/*可以采取绝对定位的方式实现*/2.center3width:960px;4position:absolute;5left:50%;（25%）6margin-left:-480px;7二、自适应块级元素水平居中前面介绍的块级元素居中要... 查看详情
纯css实现多行文字垂直居中几种方法解析
场景：父元素高度固定，如何使其中的文字垂直居中？1、table布局：（1）利用display:table+display:table-cell的方法<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head> 查看详情
移动端垂直居中对齐
方法一：利用CSS3的transform:translate.center{width:50%;position:absolute;top:50%;left:50%;-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transfo 查看详情
取消表单和文本域外轮廓.图片和文字实现垂直居中，溢出文字的省略号显示，鼠标移动到对应的li时的边框更变颜色(代码片段)
取消表单和文本域外轮廓和拖曳<style>input,textarea/*取消文本框轮扩线*/outline:0;/*文本域控制大小防止拖曳*/textarearesize:none;</style>图片和文字实现垂直居中<body><style>.userimgvertical-align:middle;/*图片与文字位置*/</styl... 查看详情
元素居中的几种方法
...置此属性，使得盒子内的内联元素居中，一般包括文字/图片等③ 背景background-position:centertop;主要实现背景图片的居中④ 文字行内垂直居中一行文字垂直居中：文字行高line-height的值与盒子的高度一致多行文字垂直居中：文字... 查看详情
移动端开发时，让字体小于12px垂直居中的方法
*margin:0.small-fontdisplay:inline-block;height:30px;line-height:30px;border:1pxsolidred;font-size:20px.containerdisplay:table.contentbackground-color:gray;font-size:10px;display:table-cell;ver 查看详情
实现图标icon+文字在div里自动中心居中（水平垂直居中）
...自动居中。通过:before来设置icon的地址和高宽。需要设置图片默认的垂直居中条件，与文字一致，为text-bottom。设置图片行级显示。<!Doctypehtml><html><head><style>body{margin:0;padding:0;}.con{position:abs 查看详情
css居中方法集锦（*******************************）
...、垂直居中方法可用于块级、行内快、内联元素以及文字图片等。水平或垂直居中 1.1text-align1.2margin1.3line-height1.4padding水平与垂直同时居中2.1挡板方式实现的水平垂直居中2.2vertical-align2.3模拟单元格特性2.4position+margin:负值2.5po... 查看详情