css中vertical-align垂直居中的认识

目标大纲

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垂直居中的认识的更多相关文章

前端知识点回顾之重点篇——CSS中vertical align属性
来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...
CSS中设置DIV垂直居中的N种方法兼容IE浏览器
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
CSS中设置div垂直居中
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
css中的左右垂直居中的问题，可兼容各种版本浏览器的写法
如题分为垂直居中,左右居中,先挑简单的记录. 一.左右居中 1.我刚开始写代码的时候,老师就直接告诉我一个简单的方法,那就是: width:500px; height:200px; margin:0 ...
css中元素水平垂直居中4种方法介绍
table-cell轻松设置文本图片水平垂直居中让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...
CSS中图片水平垂直居中方法小结
写页面时难免会遇到水平垂直居中的问题,总结一下最近使用的方法. 一.使用垂直居中和水平居中 <div id="div1"> <img src="img/ ...
在CSS中水平居中和垂直居中：完整的指南
这篇文章将会按照如下思路展开: 一.水平居中 1. 行内元素水平居中 2. block元素水平居中 3. 多个块级元素水平居中二.垂直居中 1. 行内元素水平居中 2. block元素水平居中 3. ...
CSS中元素水平居中和垂直居中的方法
#CSS中水平居中和垂直居中的方法一. 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本.图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定 ...
CSS中有关水平居中和垂直居中的解决办法
CCS中让div等块级元素在父级元素中居中的方法: (1)div{ margin:0 auto } 该方法只能实现水平的居中,无法实现元素的垂直居中 (2)当div元素的宽高是固定的,然后设置位 ...
CSS布局中的水平垂直居中
CSS布局中的水平垂直居中各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

随机推荐

DLL导出函数和类的定义区别 __declspec(dllexport)
DLL导出函数和类的定义区别 __declspec(dllexport) 是有区别的, 请看 : //定义头文件的使用方,是导出还是导入 #if defined(_DLL_API) #ifndef D ...
初学者--bootstrap（一）----在路上（1）
bootstrap: 是目前最受欢迎的前端框架,并基于HTML.CSS.JavaScript 等,而且他是为了适应并兼容各个电子设备,是对媒体查询的封装. 1.什么是媒体查询他是响应式布局的方 ...
SQL 中 EXISTS 与 NOT EXISTS
带有 EXISTS 操作符的子查询不返回任何数据,只产生逻辑真值 'true' 或逻辑假值 'false'.带有 EXISTS 操作符的子查询都是相关子查询. 相关子查询:子查询的条件依赖父查询. E ...
WaitType：ASYNC_IO_COMPLETION
项目组有一个数据库备份的Job运行异常,该Job将备份数据存储到remote server上,平时5个小时就能完成的备份操作,现在运行19个小时还没有完成,backup命令的Wait type是 AS ...
WaitType：CXPACKET
CXPACKET 等待类型是SQL Server 并发执行一个query时产生的.在run一个big query时,SQL Server充分利用系统的所有资源(CPU,Memory,IO),在最短时间 ...
深入浅出Hyper-V网络虚拟化技术
年后综合症刚刚消失殆尽,转眼就要迎接各种新的工作任务了:之前写过一篇有关hyper-v网络虚拟化内容的博文,主要是从操作系统层面入手,概要性的总结了一下,基本也都是参考了大部分官方内容再加以个人修饰: ...
VS-默认端口导致项目不能加载的解决方案
python进程池：multiprocessing.pool
本文转至http://www.cnblogs.com/kaituorensheng/p/4465768.html,在其基础上进行了一些小小改动. 在利用Python进行系统管理的时候,特别是同时操作多 ...
Mask裁切UI粒子特效或者3D模型
刚好前几天有人问我这个问题,再加上新项目也可能用,所以这两天就研究了一下.其实如果粒子特效和3D模型都用RenderTexture来做的话就不会有裁切的问题,但是粒子特效用RenderTextur ...
【结果很简单,过程很艰辛】记阿里云Ons消息队列服务.NET接口填坑过程
Maybe 这个问题很简单,因为解决方法是非常简单,但填坑过程会把人逼疯,在阿里云ONS工作人员.同事和朋友的协助下,经过一天的调试和瞎捣鼓,终于解决了这个坑,把问题记下来,也许更多人在碰到类似问题的 ...

css中vertical-align垂直居中的认识

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

随机推荐

热门专题