平时用的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. Bash 4.4 中新增的 ${parameter@operator} 语法

    Bash 4.4 中新增了一种 ${...} 语法,长这样:${parameter@operator}.根据不同的 operator,它展开后的值可能是 parameter 这个参数的值经过某种转换后 ...

  2. Pandas-数据聚合与分组运算

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

  3. MySQL检查重复索引工具-pt-duplicate-key-checker

    在MySQL中是允许在同一个列上创建多个索引的,示例如下: mysql --socket=/tmp/mysql5173.sock -uroot -p mysql> SELECT VERSION( ...

  4. 《征服 C 指针》摘录4:函数 与 指针

    一.指向函数的指针 函数名可以在表达式中被解读成“指向函数的指针”,因此,正如代码清单 2-2 的实验那样,写成 func 就可以取得指向函数的指针. “指向函数的指针”本质上也是指针(地址),所以可 ...

  5. Asp.Net Core--基于声明的授权

    翻译如下: 当创建身份时,其可以被分配由可信方发布的一个或多个声明. 索赔是名称值对,表示主题是什么,而不是主体可以做什么. 例如,您可能有驾驶执照,由当地驾驶执照颁发. 您的驾驶执照上有您的出生日期 ...

  6. 号外!GNOME 3.22 正式发布喽!!!

    导读 经过半年的努力开发,别名为“卡尔斯鲁厄”的 GNOME 3.22 正式发布了!“GNOME Software 可以安装和更新 Flatpak 软件包,GNOME Builder 则可以创建它们, ...

  7. 两个int的和判断溢出

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

  8. js倒计时,显示NaN天NaN时NaN分(或显示天时分)

    最近在开发跨平台的应用,在做秒杀功能时,倒计时出现了问题.默认在Chrome浏览器中运行,倒计时没出现问题.而在IE浏览器,火狐浏览器,safari浏览器上运行时,则显示NaN天NaN时NaN分(或显 ...

  9. AngularJS ui-router (嵌套路由)

    http://www.oschina.net/translate/angularjs-ui-router-nested-routes AngularJS ui-router (嵌套路由) 英文原文:A ...

  10. 【Docker】Docker主机为什么ip nets 查不到网络空间

    创建Docker容器后本来应该有新的命名空间(如果有独立网络的话),那么可以通过 ip netns 命令查看到命名空间,但是实际上却看不到. 查过资料才发现,ip netns 只能查看到 /var/r ...