先来看张图片

相信很多css新手遇到过这种问题，就是当图片和文本显示在一行的时候，效果很奇葩，文字和图片没法对齐，

这时我们需要做的是：

1，先给块级元素设置 display: inline-block; （行内的块级元素）

2，给图片设置高度，文本盒子不设置高度

3，给图片和文本都设置 vertical-align: middle;

4，搞定，看效果吧

顺便贴一下示例代码

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>图片文字垂直居中</title>

         <style type="text/css">

             img{

                 width: 100px;

                 height: 60px;

                 vertical-align: middle;

             }

             div{

                 vertical-align: middle;

                 display: inline-block;

             }

         </style>

     </head>

     <body>

         <img src="img/pic.jpg"/>

         <div>纵然只有倒下才是终点，我只有未来没有从前。</div>

     </body>

 </html>

css 图片文字垂直居中的更多相关文章

  1. UIButton 设置图片文字垂直居中排列

    #pragma mark 按钮图片文字垂直居中排列 -(void)setButtonContentCenter:(UIButton *)button { CGSize imgViewSize,titl ...

  2. css图片+文字浮动（文字包围效果）

    css图片+文字浮动(文字包围效果): 在网页中,我们有时想实现这个效果,但是 <div id="test"> <img src="gdimages/0 ...

  3. css之line-height及图片文字垂直居中

    css虽然没有算法,但还是很神奇的,踩到坑都不知道到底是哪里?看到张鑫旭大佬的博客讲的超级好https://www.zhangxinxu.com 行高line-height用到的频率极高,指一行文字的 ...

  4. css解决文字垂直居中

    参考链接: http://www.cnblogs.com/lufy/archive/2012/09/12/2681972.html   http://zhidao.baidu.com/question ...

  5. css图片文字

    1.浏览器是把 html 和 css 一起下载并执行的,计算机里把两件事情同时做  异步加载.计算机中的同步异步和我们生活中的正好是相反的. 补充: 同步,是所有的操作都做完,才返回给用户结果.即写完 ...

  6. css图片上下垂直居中

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. css 图片文字居中

    1.单行文字居中 2.多行文字居中 3.利用background-position:center;的图片居中 4.利用display:table-cell;属性的图片居中 <!DOCTYPE h ...

  8. css 图片文字对齐

    默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐 解决办法:在css中设置图片的vertical-align属性, <img src="" s ...

  9. CSS图片水平垂直居中

    Html: <div id="></img></div> </div> CSS: #MainContent { display:table-c ...

随机推荐

  1. Linux 小知识翻译 - 「SCP和SFTP」

    这次想说说「SCP和SFTP」. 不管SCP还是SFTP,都是SSH的功能之一.都是使用SSH协议来传输文件的. 不用说文件内容,就是登录时的用户信息都是经过SSH加密后才传输的,所以说SCP和SFT ...

  2. [福大软工] Z班 第7次成绩排行榜

    作业要求 http://www.cnblogs.com/easteast/p/7668887.html 评分细则 本次作业评分较为简单,只包含了两个方面的得分,一个是团队任务的计划(10'),一个是采 ...

  3. 平方根的C语言实现(一) —— 浮点数的存储

    版权申明:本文为博主窗户(Colin Cai)原创,欢迎转帖.如要转贴,必须注明原文网址 http://www.cnblogs.com/Colin-Cai/p/7203254.html 作者:窗户 Q ...

  4. redis学习笔记（二）-五种数据类型

    string hash hget ks k hset ks k v hgetall ks hdel ks k del ks hmset  ks k v k v list set zset 通用命令 快 ...

  5. centos7下安装docker（17docker监控---docker自带监控命令）

    Docker自带的监控子命令 1.docker ps:docker ps -a这是我们常用的查看容器状态的命令 docker  container ls和docker ps的功能一样 2.docker ...

  6. Python：Day41 http、css

    HTTP(hypertext transport protocol),即超文本传输协议.这个协议详细规定了浏览器和万维网服务器之间互相通信的规则. 2.请求协议 请求协议的格式如下: 请求首行: // ...

  7. PHP 3 运算符 if...else...elseif 语句

    <?php $x=10; $y=6; echo ($x + $y); // 输出 16 echo ($x - $y); // 输出 4 echo ($x * $y); // 输出 60 echo ...

  8. Debian 8.9 搭建wordpress个人博客

    想自己搭个博客玩玩,就搭建了此博客,过程可谓艰辛啊! 先在阿里云买了个  轻量应用服务器 1个月10块钱,好贵.... 用 windows sever 下载不了phpstudy,也不知道怎么回事... ...

  9. 环境变量配置的作用和区别：Path、Classpath、JAVA_HOME

    环境变量配置的作用和区别:Path.Classpath.JAVA_HOME 一个是零时配置,另一个是永久性配置. 零时配置的方法: 打开cmd窗口——>输入set命令,回车——>输入set ...

  10. [MicroPython]TurnipBit开发板DIY自动浇水系统

    1.实验目的: ?学习在PC机系统中扩展简单I/O 接口的方法 ?学习TurnipBit拼插编程 ?学习土壤传感器的工作原理以及使用方法 2.所需原器件: TurnipBit一块 TurnipBit扩 ...