目标大纲

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

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

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

效果 

栗子：

<!doctype html>

<html lang="en">

<head>

   <meta charset="UTF-8" />

   <title>Document</title>

   <style>

	.box {

	    background-color: #000;

	    color:#fff;

	    padding-left: 25px;

	}

	.dot {

	     display: inline-block;

	     width: 4px;

	     height: 4px;

	     background-color: orangered;

	     vertical-align: text-bottom;/*是与父标签的文字底部对齐*/

	}

   </style>

</head>

<body>

	<div class="box">

		<span class="dot"></span>我是一段文本.....

	</div>

</body>

</html>

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

源代码

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>vertical-align</title>

         <style>

              * {

                  margin: 0;

                  padding: 0;

              }

             .box {

                 background-color: deeppink;

                 color: #fff;

                 padding-left: 10px;

                 line-height: 65px;

             }

             .inner-box {

                 display: inline-block;

                 width: 4px;

                 height: 4px;

                 background-color: black;

                 vertical-align: text-bottom; /*与父容器标签底部对齐*/

             }

             .box_1 {

                 background-color: royalblue;

                 margin-top: 5px;

                 color: #fff;

                 padding-left: 10px;

             }

             .box_1 img {

                 width: 65px;

             }

             .box_1 span {

                 background-color: red;

             }

         </style>

     </head>

     <body>

         <div class="box">

             <span class="inner-box"></span>

             这是一段文本内容_vertical-align......

         </div>

         <div class="box_1">

             <img src="img/photo.jpg" /><span>这是一段文本内容_vertical-align......</span>

         </div>

     </body>

 </html>

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

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

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

img {  vertical-align: top;  }

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

img { display: block;}

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

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

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

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

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

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>消除图片下面空白间隙的几种方法（原因vertical-align与line-height导致）</title>

         <style>

             .box_1 {

                 background-color: royalblue;

                 margin-top: 5px;

                 color: #fff;

                 padding-left: 10px;

                 font-size: 0;/*字体足够小*/

                 /* line-height: 5px;*/

             }

             .box_1 img {

                 /*vertical-align: top;文字与父标签的顶部对齐*/

                 /*vertical-align: middle;*/

                 /*display: block;*/

             }

             .box_1 span {

                 background-color: red;

             }

         </style>

     </head>

     <body>

         <div class="box_1">

             <img src="img/photo.jpg"  width="65"/>

             <span>这是一段文本内容_vertical-align......</span>

         </div>

     </body>

 </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. json、javaBean、xml互转的几种工具介绍

    json.javaBean.xml互转的几种工具介绍 转载至:http://blog.csdn.net/sdyy321/article/details/7024236 工作中经常要用到Json.Jav ...

  2. WCF学习之旅—WCF第二个示例（五）

    二.WCF服务端应用程序 第一步,创建WCF服务应用程序项目 打开Visual Studio 2015,在菜单上点击文件—>新建—>项目—>WCF服务应用程序.在弹出界面的“名称”对 ...

  3. ASP.NET Core 1.1 静态文件、路由、自定义中间件、身份验证简介

    概述 之前写过一篇关于<ASP.NET Core 1.0 静态文件.路由.自定义中间件.身份验证简介>的文章,主要介绍了ASP.NET Core中StaticFile.Middleware ...

  4. Autocomplete 自动补全（Webform实战篇）

    开篇语 因为项目中需要用到一个自动补全的功能,功能描述: 需求一:新增收件人的时候,自动下拉显示出数据库中所有的收件人信息(显示的信息包括:姓名-收件地址-联系方式) 需求二:选中一个值得时候,分别赋 ...

  5. 【转】WPF TextBox和PasswordBox加水印

    Textbox加水印 Textbox加水印,需要一个VisualBrush和触发器验证Text是否为空,在空的时候设置背景的Brush就可以实现水印效果. <TextBox Name=" ...

  6. 有意思的Console

    在很久的以前,因为经常在浏览器控制台调试修改数据,想到用户如果使用控制台配合抓包工具修改上下行流量中的数据,会给站点带来不定的安全威胁,所以一直想找个方法,准确的说是js的方法“禁用”控制台,也就是用 ...

  7. jsp通过易宝方式实现在线支付

    项目下载地址: https://github.com/hjzgg/OnlinePayment 参考:http://blog.csdn.net/jadyer/article/details/738025 ...

  8. MongoDB学习系列(3)--解决MongoDB Unexpected Shutdown问题

    晚上准备继续学习PHP+MongoDB,点击Run_MongoDB_Service.bat文件,这个文件是我写的bat文件,就是快速启动MongoDB.但是命令行一闪而过,我很奇怪.昨天晚上写代码还是 ...

  9. ES6 - Note1：块级作用域与常量

    在ES6以前,ES不支持块级作用域,只有全局作用域和函数作用域,所有变量的声明都存在变量声明提升. 1.let 关键字 声明一个块级变量,只在一个代码块中有效,如果在块外面访问便会报错,如下所示: { ...

  10. ORA-00257 archiver error 处理思路

    1.首先查下oerr给出的简要说明 2.查询V$RECOVERY_AREA_USAGE信息 3.根据实际空间剩余情况先适当增加归档目录的大小,保证先恢复业务 4.查看备份是否存在问题 1.首先查下oe ...