平时用的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. Pandas-数据聚合与分组运算

    目录 图解"split-apply-combine" 数据的分类split: groupby() 以column进行分组 以index进行分组 分组遍历 数据的应用apply: a ...

  2. multiple merge document

    http://www.aspose.com/docs/display/wordsnet/How+to++produce+multiple+documents+during+mail+merge

  3. PhpStorm 9.03 集成 开源中国(oschina.net)的Git项目,提交SVN时注意事项

    第一步:配置 git.exe File -> Default Settings -> Version Control -> Git -> Path go Git executa ...

  4. 两个int的和判断溢出

    long a,b; cin>>a>>b; long i; i = a+b; if((i^a)<0 && (i^b)<0) cout<<& ...

  5. 核型SVM

    (本文内容和图片来自林轩田老师<机器学习技法>) 1. 核技巧引入 如果要用SVM来做非线性的分类,我们采用的方法是将原来的特征空间映射到另一个更高维的空间,在这个更高维的空间做线性的SV ...

  6. Python基本数据类型

    一.整数 int(整形) 在32位机器上,整数的位数为32位,取值范围为-2**31~2**1-1,即-2147483648-2147483647 在64位系统上,整数的位数为64位,取值范围为-2* ...

  7. Html 两个DIV并排的问题

    在一个容器内部,要放在两个并排的DIV,两个方法: 1.使用浮动.这个方式div是脱离文档流的,在窗口布局复杂,大小变化的时候,可能会有一些不希望的情况发生. <!DOCTYPE HTML> ...

  8. Linux下hostname与hosts

    参考:http://wp.fungo.me/linux/what-the-hell-is-hostname.html hostname 就是机器名,内核中的一个变量,可临时修改也可以永久修改 /etc ...

  9. 35.两链表的第一个公共结点[Find the first common node of two linked list]

    [题目] 两个单向链表,找出它们的第一个公共结点. 链表的结点定义为:  C++ Code  123456   struct ListNode {     int         m_nKey;    ...

  10. 使用div元素来包含内容

    在编写样式表时,经常要用到<div>元素来包含内容~~ 下面试简单的示例~ moreHigh.htm l <!DOCTYPE html> <html lang=" ...