先来看张图片

相信很多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. 【算法】LeetCode算法题-Length Of Last Word

    这是悦乐书的第155次更新,第157篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第14题(顺位题号是58).给定一个字符串,包含戴尔字母.小写字母和空格,返回最后一个单 ...

  2. leetcode刷题--两数之和（简单）

    一.序言 第一次刷leetcode的题,之前从来没有刷题然后去面试的概念,直到临近秋招,或许是秋招结束的时候才有这个意识,原来面试是需要刷题的,面试问的问题都是千篇一律的,只要刷够了题就差不多了,当然 ...

  3. 一个tomcat部署多个应用实例

    安装JDK7sudo apt-get install java7-jdk 安装tomcat7 Tomcat7下载地址http://mirror.bjtu.edu.cn/apache/tomcat/to ...

  4. ubuntu集群下ssh配置总结

    最重要的前提就是:集群中的所有机器的用户名和用户组必须一样 一般做法都是在每台机器上新建用户组和用户名. 比如:sudo addgroup sparks 新建用户组sparks: sudo addus ...

  5. fabric使用

    1.入门博客https://fabric-chs.readthedocs.io/zh_CN/chs/tutorial.html 如果遇到这个问题说明你的fabric版本太高了 卸载到现在版本重新安装就 ...

  6. SecureCRT 使用 rz命令提示waiting to receive.**B0100000023be50

    SecureCRT 远程连接Linux服务器,使用 rz命令提示waiting to receive.**B0100000023be50,或者使用sz命令提示: **B0100000023be50 解 ...

  7. pip freeze 打包依赖库及setup.py

    需要打包的工程目录下使用命令: pip freeze > requirements.txt 就会在pip目录生成 requirements.txt 文件,该文件内就是当前环境所安装的所有扩展包打 ...

  8. [matlab] 6.粒子群优化算法

    粒子群优化(PSO, particle swarm optimization)算法是计算智能领域,除了蚁群算法,鱼群算法之外的一种群体智能的优化算法,该算法最早由Kennedy和Eberhart在19 ...

  9. CSAPP：第八章 异常控制流1

    CSAPP:第八章 异常控制流1 关键点:异常 8.1 异常8.2 进程   现代系统通过使控制流发生突变来对这些情况做出反应,一般而言,我们把这些突变称为异常控制流(Exceptional Cont ...

  10. flash设置里面：您的 Flash 设置会一直保留到您退出 Chrome 为止。

    疑问:flash设置里面:您的 Flash 设置会一直保留到您退出 Chrome 为止. 我记得以前的版本配置后就一直用啊,允许的就可以一直允许,现在这个sb版本退出后就恢复到默认,允许列表的网站就清 ...