目标大纲

1.vertical-align为何不起作用？？

vertical-align只钟情于“inline-block内联块级元素/inline元素”

vertical-align属性 text-bottom是与父标签的文字底部对齐

效果 

栗子：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.    <meta charset="UTF-8" />
  5.    <title>Document</title>
  6.    <style>
  7. 	.box {
  8. 	    background-color: #000;
  9. 	    color:#fff;
  10. 	    padding-left: 25px;
  11. 	}
  12. 	.dot {
  13. 	     display: inline-block;
  14. 	     width: 4px;
  15. 	     height: 4px;
  16. 	     background-color: orangered;
  17. 	     vertical-align: text-bottom;/*是与父标签的文字底部对齐*/
  18. 	}
  19.    </style>
  20. </head>
  21. <body>
  22. 	<div class="box">
  23. 		<span class="dot"></span>我是一段文本.....
  24. 	</div>
  25. </body>
  26. </html>

2.如何消除图片下面的间隙是如何出现的？？

源代码

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title>vertical-align</title>
  6.          <style>
  7.               * {
  8.                   margin: 0;
  9.                   padding: 0;
  10.               }
  11.              .box {
  12.                  background-color: deeppink;
  13.                  color: #fff;
  14.                  padding-left: 10px;
  15.                  line-height: 65px;
  16.              }
  17.              .inner-box {
  18.                  display: inline-block;
  19.                  width: 4px;
  20.                  height: 4px;
  21.                  background-color: black;
  22.                  vertical-align: text-bottom; /*与父容器标签底部对齐*/
  23.              }
  24.  
  25.              .box_1 {
  26.                  background-color: royalblue;
  27.                  margin-top: 5px;
  28.                  color: #fff;
  29.                  padding-left: 10px;
  30.              }
  31.              .box_1 img {
  32.                  width: 65px;
  33.              }
  34.              .box_1 span {
  35.                  background-color: red;
  36.              }
  37.          </style>
  38.      </head>
  39.      <body>
  40.          <div class="box">
  41.              <span class="inner-box"></span>
  42.              这是一段文本内容_vertical-align......
  43.          </div>
  44.          <div class="box_1">
  45.              <img src="img/photo.jpg" /><span>这是一段文本内容_vertical-align......</span>
  46.          </div>
  47.      </body>
  48.  </html>

默认情况下图片vertical-align与一段文本的基线baseline对齐，由于文本存在line-height高度，所以就会出现间隙

3.如何消除图片下面的空白间隙？？

a.设置vertical-align值，vertical-align: top/middle/bottom;

  1. img {  vertical-align: top;  }

b.让vertical-align失效，vertical-align 只对“inline-block内联块级元素”有效，我们只设置图片display:block就可以搞定

  1. img { display: block;}

c.设置line-height行高足够小

  1. div.box_1 { line-height: 5px;}

d.通过line-height间接控制，font-size字体足够小

  1. div.box_1 { font-size: 0; /*字体足够小*/}

消除图片下面空白间隙的几种方法源码

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title>消除图片下面空白间隙的几种方法（原因vertical-align与line-height导致）</title>
  6.          <style>
  7.              .box_1 {
  8.                  background-color: royalblue;
  9.                  margin-top: 5px;
  10.                  color: #fff;
  11.                  padding-left: 10px;
  12.                  font-size: 0;/*字体足够小*/
  13.                  /* line-height: 5px;*/
  14.              }
  15.              .box_1 img {
  16.                  /*vertical-align: top;文字与父标签的顶部对齐*/
  17.                  /*vertical-align: middle;*/
  18.                  /*display: block;*/
  19.              }
  20.              .box_1 span {
  21.                  background-color: red;
  22.              }
  23.          </style>
  24.      </head>
  25.      <body>
  26.          <div class="box_1">
  27.              <img src="img/photo.jpg"  width="65"/>
  28.              <span>这是一段文本内容_vertical-align......</span>
  29.          </div>
  30.      </body>
  31.  </html>

【资料参考】

  http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

  http://www.zhangxinxu.com/wordpress/2010/05/我对css-vertical-align的一些理解与认识（一）/

css中vertical-align垂直居中的认识的更多相关文章

  1. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  2. CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  3. CSS中设置div垂直居中

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  4. css中的左右垂直居中的问题，可兼容各种版本浏览器的写法

    如题分为垂直居中,左右居中,先挑简单的记录. 一.左右居中 1.我刚开始写代码的时候,老师就直接告诉我一个简单的方法,那就是: width:500px; height:200px; margin:0 ...

  5. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  6. CSS中图片水平垂直居中方法小结

    写页面时难免会遇到水平垂直居中的问题,总结一下最近使用的方法. 一.使用垂直居中和水平居中 <div id="div1"> <img src="img/ ...

  7. 在CSS中水平居中和垂直居中：完整的指南

    这篇文章将会按照如下思路展开: 一.水平居中 1. 行内元素水平居中 2. block元素水平居中 3. 多个块级元素水平居中 二.垂直居中 1. 行内元素水平居中 2. block元素水平居中 3. ...

  8. CSS中元素水平居中和垂直居中的方法

    #CSS中水平居中和垂直居中的方法 一. 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本.图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定 ...

  9. CSS中有关水平居中和垂直居中的解决办法

    CCS中让div等块级元素在父级元素中居中的方法: (1)div{  margin:0 auto   } 该方法只能实现水平的居中,无法实现元素的垂直居中 (2)当div元素的宽高是固定的,然后设置位 ...

  10. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

随机推荐

  1. SQLite帮助类SQlitehelper 实现对SQLite数据的增删改查

    public class SQLiteHelper { public const string sConn = "Data Source=" + @"path" ...

  2. iOS完整学习路线图

  3. ORA-01652：无法通过128(在表空间temp中)扩展temp段 解决方法

    ORA-01652:无法通过128(在表空间temp中)扩展temp段 解决方法 (2016-10-21 16:49:53)   今天在做一个查询的时候,报了一个"ORA-01652无法通过 ...

  4. c#利用泛型集合，为自己偷偷懒。

    有人说"越懒"的程序员进步的越快!其实还挺有道理.亲身体验,从刚出来工作到现在,自己变"懒"了许多,但感觉写出来的代码确有了不少提升.刚开始啊,同样的代码,赋值 ...

  5. 传智播客--高级控件--showdialog关闭（小白内容）

    以往我在WPF里,用ShowDialog展示出一个页面,一般都是用Close()进行关闭. 今天看传智播客的视频时,了解到还能直接给DialogResult一个TRUE或者false的属性,使页面关闭 ...

  6. MVC4做网站Demo进行重写的问题。

    自从学习MVC4开始,边学边写这个demo,写了也有一年多了.开始觉得是一个小例子把所有的代码都写在一个项目中,边写边改越写越混乱,越到后来很多东西自己都理不清了.后来在群里跟 @怒放 在讨论这个问题 ...

  7. Delete Volume 操作 - 每天5分钟玩转 OpenStack（57）

    今天讨论 cinder 如何删除 volume . 状态为 Available 的 volume 才能够被 delete.如果 volume 当前已经 attach 到 instance,需要先 de ...

  8. JavaScript之糟粕

    0.导言 在上篇<JavaScript之毒瘤>中,列举了一些在JavaScript中难以避免的问题特性.本篇将会展示JavaScript中有问题的特性,但我们很容易就能便面它们.通过这些简 ...

  9. 前端工程优化：javascript的优化小结

     我觉得优化javascript是一门高深的学问,在这里也只能站在前人的肩膀上,说一些我浅显的认识,更希望的是抛钻引玉,如有不对,敬请斧正. 首先,要认识到是,优化js的关键之处在于,优化它的运行速度 ...

  10. tomcat:there is no resources that can be added or removed from server

    原因: 1.不是web project 解决方式:project-->property--project facet 新建或者修改 2. 版本不兼容 升级tomcat版本