先来看张图片

相信很多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. C# 隐藏最大化、最小化和关闭三个按钮

    在Windows的窗体编程中,基本上每一个窗体都是一个最小化.最大化和关闭按钮的. 一.禁用最大化和最小化 对于最大化和最小化按钮,在C#窗体开发时,各一个属性来启用或禁用这两个按钮. this.Ma ...

  2. 《Java大学教程》—第24章 Java的背景

    本章主要介绍的是Java的背景知识,通过了解历史知道Java与其他语言的区别,以便更好选择在什么场景下使用Java. 24.2    语言的尺寸Java语言短小.紧凑,以C++为基础,放弃了一些特定的 ...

  3. 轮播图插件swiper 的使用

    引入文件(注:目前版本号为Swiper3.x) <link rel="stylesheet" type="text/css" href="//s ...

  4. python之常用模块（续）

    time模块 random模块 sys模块 os模块 序列化模块  time模块 有三种方式表示 在Python中,通常有三种方式来表示时间:时间戳.元组(struct_time).格式化的时间字符串 ...

  5. 思考与算法：大脑是cpu、思考是算法

    思考与算法:大脑是cpu.思考是算法

  6. 机器学习算法总结(三)——集成学习(Adaboost、RandomForest)

    1.集成学习概述 集成学习算法可以说是现在最火爆的机器学习算法,参加过Kaggle比赛的同学应该都领略过集成算法的强大.集成算法本身不是一个单独的机器学习算法,而是通过将基于其他的机器学习算法构建多个 ...

  7. 爬取伯乐在线文章（五）itemloader

    ItemLoader 在我们执行scrapy爬取字段中,会有大量的CSS或是Xpath代码,当要爬取的网站多了,要维护起来很麻烦,为解决这类问题,我们可以根据scrapy提供的loader机制. 导入 ...

  8. 关于alter database datafile offline和alter database datafile offline drop 的区别

    转: https://blog.csdn.net/killvoon/article/details/46913183 -----------------------2015-07-16-------- ...

  9. GT常见问题

    1.需要root? 大部分核心功能都需要root权限.需要root的功能有:FPS.Mem Assistant.Logcat日志.抓包.流畅度获取(未开放). 2.root工具总弹出提示框要确认roo ...

  10. Edusoho之LAMP环境搭建

    主要参考官方文档Ubuntu16.04+Apache+PHP+MySQL+EduSoho 安装教程LAMP环境按照如下搭建是没有问题的,本地虚拟机试验是完全没有问题的. 1.更新 sudo apt-g ...