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布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...
随机推荐
- gulp思考
Gulp,一个基于流的构建工具. 这是自己写的一个构建的demo,只是一个纯演示的示例,并没有完成什么项目工作.下面根据这个demo介绍一下Gulp. 上代码: gulpfile.js 'use st ...
- C#设计模式系列：建造者模式（Builder）
1.建造者模式简介 1.1>.定义 建造者模式(Builder)将复杂的构建与其表示相分离,使得同样的构建过程可以创建不同的表示. 1.2>.使用频率 中低 1.3>.原型模式应用 ...
- 【WP 8.1开发】如何动态生成Gif动画
相信如何为gif文件编码,很多朋友都会,而难点在于怎么让GIF文件中的帧动起来,也就是创建gif动画. Gif文件编码方法 先简单介绍一下编码的方法. 1.调用BitmapEncoder.Create ...
- datatable去重
两种方法1 数据库直接去除重复select distinct * from 表名去除了重复行distinct 2 对 DataTable直接进行操作DataTable dt=db.GetDt(&quo ...
- centos6.5 下搭建lamp环境
一直以为很麻烦,实际操作起来并没有遇到什么问题,yum源是163,php版本是5.3(有点老,以后再更新吧):详细步骤如下: 第一步:安装php mysql apache yum -y install ...
- supportRequestWindowFeature与requestWindowFeature
在Activity中去掉标题栏只需要在onCreate()中在setContentView前使用requestWindowFeature(). 在AppCompatActivity中去掉标题栏只需要在 ...
- Android之控件使用
Android系统为我们提供了大量的控件,例如:开关控件.单选按钮.多选按钮.单选菜单等等,那么这些控件如何使用呢?本篇我将带领大家一道学习一下如何使用这些控件.所谓无图无真相,先让大家看一下效果图: ...
- Web APi之EntityFramework【CRUD】（三）
前言 之前我们系统学习了EntityFramework,个人觉得有些东西不能学了就算完了,必须要学以致用,在Web API上也少不了增(C).删(D).改(U).查(R).鉴于此,我们通过EF来实现W ...
- jquery EasyUI的formatter格式化函数代码
要格式化数据表格列,需要设置formatter属性,该属性是一个函数,它包含两个参数: value: 对应字段的当前列的值 record: 当前行的记录数据 复制代码 代码如下: $('#tt' ...
- weight属性你用的真的6嘛？
相信大家在日常开发中一定使用过weight这个属性,它的作用一个是权重,另一个就是渲染优先级,但是你真的能很6的使用它嘛?如果不是,那么请继续往下看!!! 我们知道,当weight起到不同作用的时候, ...