先来看张图片

相信很多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. C3P0连接池温习1

    一.应用程序直接获取数据库连接的缺点 用户每次请求都需要向数据库获得链接,而数据库创建连接通常需要消耗相对较大的资源,创建时间也较长.假设网站一天10万访问量,数据库服务器就需要创建10万次连接,极大 ...

  2. 远程连接ubuntu的MongoDB遇到的坑

    首先连接不上,先查看云服务器上的安全组是否添加了对应的端口 如果打开了,那么久查看MongoDB是否允许远程连接 # mongod.conf # for documentation of all op ...

  3. InfluxDB基本概念和操作

    InfluxDB基本概念 1.数据格式 在 InfluxDB 中,我们可以粗略的将要存入的一条数据看作一个虚拟的 key 和其对应的 value(field value).格式如下: 1 cpu_us ...

  4. ServletContextListener的作用

    ServletContextListener是对ServeltContext的一个监听.servelt容器启动,serveltContextListener就会调用contextInitialized ...

  5. 最小生成树 A - 畅通工程

    dalao视频:https://www.bilibili.com/video/av4768483 https://www.bilibili.com/video/av4768483?p=2 省政府“畅通 ...

  6. 15.selenium_case03

    # 利用搜狗搜索接口抓取微信公众号 # 搜狗的微信搜索: # http://weixin.sogou.com # 搜索:“Python爱好者社区” # 找到它的微信号:python_shequ fro ...

  7. Leetcode：003 无重复字符串

    Leetcode:003 无重复字符串 关键点:给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度.示例 1:输入: "abcabcbb"输出: 3 解释: 因为无重复 ...

  8. ASP.Net Web API 输出缓存 转载 -- Output caching in ASP.NET Web API

    一.Nuget安装相关dll Web API 2 : Install-Package Strathweb.CacheOutput.WebApi2 Web API 1 : Install-Package ...

  9. 【js】项目中遇到的零星知识点

    1.将进行url编码的json字符串转成json对象 在解析为json对象之前,要先用decodeURIComponent(str)来进行解码,然后这json串又变成了我们原先的json串了.然后我们 ...

  10. 深度学习框架PyTorch一书的学习-第六章-实战指南

    参考:https://github.com/chenyuntc/pytorch-book/tree/v1.0/chapter6-实战指南 希望大家直接到上面的网址去查看代码,下面是本人的笔记 将上面地 ...