平时用的text-align属性比较多,相比较而言vertical-align则用的比较少。

当文字和图片布局在一起时,文字不能对齐到图片的中间,向这样:

HTML:

<div>
<img src="2.jpg" alt="">哈哈哈哈哈哈哈哈哈
</div>

CSS:

  div{
    width: 200px;
    height: 50px;
  }

此时需给img元素设置vertical-align:middle即可

  div img{
    vertical-align: middle;
  }

效果图:

CSS:文字不在图片中间的更多相关文章

  1. css文字居中、图片居中、div居中解决方案

    一.文字居中 若文字只有一行 <!--html代码--> <div class="box"> <p class="text"> ...

  2. <转载>使CSS文字图片div元素居中方法之水平居中的几个方法

    文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...

  3. 关于用css实现文本和图片垂直水平居中

    关于用css实现文本和图片垂直水平居中   一直相信好记性不如烂笔头,最近遇到很多用到垂直居中的,整理一下以便日后查阅. 一.文本垂直水平居中 1.水平居中: 文字水平居中没什么好说的,用text-a ...

  4. css代码添加背景图片常用代码

    css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; heigh ...

  5. css 文字垂直居中问题

    CSS 文字垂直居中问题 问题:在 div 中文字居中问题: 当使用 line-height:100%%; 时,文字没有居中,如下: html: <div id="header_log ...

  6. 大众点评评论数据抓取 反爬虫措施有css文字映射和字体库反爬虫

    大众点评评论数据抓取  反爬虫措施有css文字映射和字体库反爬虫 大众点评的反爬虫手段有那些: 封ip,封账号,字体库反爬虫,css文字映射,图形滑动验证码 这个图片是滑动验证码,访问频率高的话,会出 ...

  7. 奇思妙想 CSS 文字动画

    之前有些过两篇关于字体的文章,是关于如何定义字体的: 你该知道的字体 font-family Web 字体 font-family 再探秘 本文将会和这篇 -- CSS 奇思妙想边框动画类似,讲一些文 ...

  8. 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题

    在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...

  9. CSS Image Sprite--网页图片应用处理方式

    CSS Sprites简介 CSSSprites在国内很多人叫css精 灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片 ...

随机推荐

  1. ecshop 支付

    支付分成两部分 1.订单信息 2.支付日志ID 3.生成支付代码 一次性支付完成 // 支付信息 include_once('includes/lib_payment.php'); $order['l ...

  2. SDK 支付

    充值:用什么买什么 MSDK: Q点:百科 http://baike.baidu.com/link?url=Dw8ySUIvv6AAprULG_wnI7Mst61gG4bO2qzfpfi1j9xx6c ...

  3. 在Activity之间传递参数(一)

    准备: 一.创建主界面:activity_main.xml文件中<Button android:text="启动另一个Activity" android:id="@ ...

  4. 前端工具之Gulp

    Gulp是一款前端自动化的工具,如果能熟练使用Gulp来进行开发一定可以节省很多的时间,也可以快速的提高工作效率. 在使用Gulp之前就是要配置好Gulp安装的环境,这是我们能使用Gulp快速开发的第 ...

  5. 表单提交按钮input和button、a的差异

    现在普遍的在网页中,表单提交数据的按钮最常见实用有三种,一种是input,一种是button,最后一种,是其他如a标签,div标签,span标签代替而来.在以前的日子里,大家都习惯于用input,因为 ...

  6. ASCII码表

    ASCII码表 ASCII码大致可以分作三部分組成. 第一部分是:ASCII码非打印控制字符: 第二部分是:ASCII码打印字符: 第三部分是:扩展ASCII码打印字符. 第一部分:ASCII非打印控 ...

  7. [MapReduce] Google三驾马车:GFS、MapReduce和Bigtable

    声明:此文转载自博客开发团队的博客,尊重原创工作.该文适合学分布式系统之前,作为背景介绍来读. 谈到分布式系统,就不得不提Google的三驾马车:Google FS[1],MapReduce[2],B ...

  8. 浅析Java中的final关键字

    浅析Java中的final关键字 谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字.另外,Java中的String类就是一个final类,那么今天我们就来 ...

  9. Linux/CentOS优化配置 汇总

    [强烈要求做的]CentOS启用sudo,禁用root远程登录 Linux命令行修改IP.网关.DNS.主机名 的方法 Linux开机直接进入“命令行”模式 更改CentOS 6.x yum源为国内1 ...

  10. java基础知识(三)java关键字

    关键字是电脑语言事先定义的,是特别意义的标识符,又叫保留字.用来表示一种数据类型或程序的结构等,关键字不能用作变量名.类名.方法名或参数.java目前共有50个关键字,其中"const&qu ...