平时用的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. Endnote专题之--output style相关问题

    Endnote专题之--output style相关问题 1. 打开output style, Edit--->Output Styles--->选择要编辑的某个style模板,如下面的E ...

  2. tamtam-nuget-imageserver

    https://bitbucket.org/tamtam-nl/tamtam-nuget-imageserver/src/eaddb1ac943fcaa9e7ef210ed5a5ccf630b8699 ...

  3. [Nhibernate]SchemaExport工具的使用(一)——通过映射文件修改数据表

    目录 写在前面 文档与系列文章 SchemaExport工具 SchemaUpdate工具 一个例子 总结 写在前面 上篇文章介绍了使用代码生成器的nhibernate模版来生成持久化类,映射文件等内 ...

  4. Bash 为何要发明 shopt 命令

    在 Bash 中,有两个内置命令用来控制 Bash 的各种可配置行为的开关(打开或关闭),这些开关称之为选项(option).其中一个命令是 set,set 命令有三种功能:显示所有的变量和函数:修改 ...

  5. SHLVL 和 BASH_SUBSHELL 两个变量的区别

    SHLVL 是记录多个 Bash 进程实例嵌套深度的累加器,而 BASH_SUBSHELL 是记录一个 Bash 进程实例中多个子 Shell(subshell)嵌套深度的累加器. 看不懂上面这句话不 ...

  6. MapReduce的核心资料索引 [转]

    转自http://prinx.blog.163.com/blog/static/190115275201211128513868/和http://www.cnblogs.com/jie46583173 ...

  7. Nginx的继续深入(日志轮询切割,重写,负载均衡等)

    Nginx的访问日志轮询切割 通常什么情况Nginx会把所有的访问日志生成到一个制定的访问日志文件access.log里面,但时间一长,日志个头很大不利于日志的分析和处理. 有必要对Nginx日志进行 ...

  8. 获取上个页面的url包括参数

    Uri uri = Request.UrlReferrer; string path = uri.AbsoluteUri; TempData["path"] = path;

  9. AdminLTE 2 开源模版

    AdminLTE  2 开源模版: 1. 文档  https://almsaeedstudio.com/themes/AdminLTE/documentation/index.html 2. 代码   ...

  10. servlet 之request

    request对象中其他功能     一.转发和包含         转发==>用于一个servlet和一个jsp合作处理             servlet用于处理逻辑.jsp用于显示   ...