先来看张图片

相信很多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. MATLAB简易画图2—普通直角坐标系

    MATLAB简易画图2—普通直角坐标系 本人的MATLAB版本为: 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 继续在“MATLAB简易画图”这篇随 ...

  2. SpringMVC-DispatcherServlet工作流程及web.xml配置

    工作流程: Web中,无非是请求和响应: 在SpringMVC中,请求的第一站是DispatcherServlet,充当前端控制器角色: DispatcherServlet会查询一个或多个处理器映射( ...

  3. ccf 再买菜 搜索 dfs

    //递推关系式:(b[n-1]+b[n]+b[n+1])/3=a[n] //所以b[n+1]=3*a[n]-b[n-1]-b[n],或b[n+1]=3*a[n]-b[n-1]-b[n]+1,或b[n+ ...

  4. docker实战练习（一）

    systemctl start docker systemctl pause docker systemctl unpause docker systemctl start docker system ...

  5. display为inline-block的元素有内容和没有内容情况下高度不一致的问题

    这两天发现一个问题,就是display为inline-block的元素有内容和没有内容情况下高度不一致,虽然不会出现元素中没内容的情况,但是我还是决定必须解决这个问题,可能我有一些轻微的强迫症. &l ...

  6. [JXOI2018]游戏

    嘟嘟嘟 九条可怜竟然有这种良心题,似乎稍稍刷新了我对九条可怜的认识. 首先假设我们求出了所有必须要筛出来的数m,那么\(t(p)\)就只受最后一个数的位置影响. 所以我们枚举最后一个数的位置,然后用组 ...

  7. foreach 與 reference 的雷

    前陣子公司定期技術研討會時,有人提出了一個問題. $arr = [1, 2, 3]; foreach ($arr as &$a) {} foreach ($arr as $a) {} var_ ...

  8. apache反向代理出现502调整

    1.问题描述:项目上线后,会在接口调用时客户端出现502异常,而服务端则对该此请求作出处理. 2.问题原因:经过排查后得知是由于请求并发量大,造成超过请求超时间,但是apache中队列已经加载到请求信 ...

  9. day14（2）---列表推导式、生成器推导式、字典推导式、三元表达式

    一.列表推导式: ls = [元素表达式 for i in 可迭代对象 if 筛选条件] 案例: # -*- coding: utf-8 -*- '''列表生成式练习''' # 练习一(三元表达式): ...

  10. VMware中安装Centos 7

    1.点击“文件-新建”,如下图 2.选择"典型".下一步 3.选择”稍后安装操作系统”,下一步. 4.选择要安装的操作系统类型,下一步 5.填写虚拟机名称,设置虚拟机的存放位置,下 ...