CSS中的vertical-align属性
1,vertical-align属性的作用?
设置元素垂直对齐的方式;
2,该属性使用过程的注意点:
与text-align属性不同,text-align属性是设置给需要对齐元素的父元素的,
而vertical-align属性是设置给需要对其元素本身的;
3,该属性的取值有哪些?
3.1,top (与顶部对齐);
3.2,bottom (与底部对齐);
3.3,text-top (与文字顶部对齐);
3.4,text-bottom (与文字底部对齐);
3.5,baseline (与基线对齐);
3.6,middle (与中线对齐)
4,具体示例:该示例是通过设置图片六种不同的垂直对齐属性来进行对齐的
<style>
div{
width: 400px;
margin: 45px auto;
font-size: 40px;
line-height: 100px;
}
img{
height: 80px;
}
div:nth-child(1){
background-color: red; }
div:nth-child(1)>img{
/*默认对齐方式基线对齐*/
vertical-align: baseline;
}
div:nth-child(2){
background-color: green;
}
div:nth-child(2)>img{
/*顶部对齐*/
vertical-align: top;
}
div:nth-child(3){
background-color: blue; }
div:nth-child(3)>img{
/*底部对齐*/
vertical-align: bottom;
}
div:nth-child(4){
background-color: pink; }
div:nth-child(4)>img{
/*文字顶部对齐*/
vertical-align: text-top;
}
div:nth-child(5){
background-color: skyblue; }
div:nth-child(5)>img{
/*文字底部对齐*/
vertical-align: text-bottom;
}
div:nth-child(6){
background-color: brown; }
div:nth-child(6)>img{
/*中线对齐*/
vertical-align: middle;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vertical-align属性</title>
</head>
<body>
<div>
a,基线对齐
<img src="https://images.cnblogs.com/cnblogs_com/TomHe789/1652521/o_200222073220ctl.jpg" alt="">
</div>
<div>
b,顶部对齐
<img src="https://images.cnblogs.com/cnblogs_com/TomHe789/1652521/o_200222073220ctl.jpg" alt="">
</div>
<div>
c,底部对齐
<img src="https://images.cnblogs.com/cnblogs_com/TomHe789/1652521/o_200222073220ctl.jpg" alt="">
</div>
<div>
d,文字顶部对齐
<img src="https://images.cnblogs.com/cnblogs_com/TomHe789/1652521/o_200222073220ctl.jpg" alt="">
</div>
<div>
e,文字底部对齐
<img src="https://images.cnblogs.com/cnblogs_com/TomHe789/1652521/o_200222073220ctl.jpg" alt="">
</div>
<div>
f,中线对齐
<img src="https://images.cnblogs.com/cnblogs_com/TomHe789/1652521/o_200222073220ctl.jpg" alt="">
</div>
</body>
</html>
CSS中的vertical-align属性的更多相关文章
- CSS中具有继承性的属性:
CSS中具有继承性的属性: color:#eee font: font-style font-variant: font-weight:bold font-size font-family: fo ...
- 妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
- css3系列-2.css中常见的样式属性和值
css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- css中overflow:hidden的属性 可能会导致js下拉菜单无法显示
css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...
- CSS中默认被继承的属性
在CSS中,所有属性都可以被继承,只需要显式的设置属性值为inherit即可.如果不设置该属性,CSS大部分属性默认不会从父元素继承而是设置初始值(initial value),但是有一部分属性,默认 ...
- css 中可以继承的属性
CSS中可以和不可以继承的属性一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到 ...
- css中可以继承的属性
声明 : 本文源于https://www.cnblogs.com/thislbq/p/5882105.html CSS中可以和不可以继承的属性 一.无继承性的属性 1.display:规定元素应该 ...
- CSS中px和em属性的特点与区别
详解px和em的特点和区别象素px是我们在定义CSS中经常用到的尺寸大小单位,而em在国外网站中经常被使用,px和em之间究竟有什么区别和特点呢?◆px像素(Pixel),相对长度单位.像素px是相对 ...
- [转]总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
随机推荐
- Mondriaan's Dream 轮廓线DP 状压
Mondriaan's Dream 题目链接 Problem Description Squares and rectangles fascinated the famous Dutch painte ...
- 获取PHP类的所有属性和所有方法,可通过反射机制
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <?php class Class1{ public $var1 = 'v ...
- Java错误:找不到类文件或者未加载主类
使用java命令执行.class文件时,java只会查找环境变量CLASSPATH中的目录,并会不查找当前目录,所以只要把当前目录”."加入到CLASSPATH中就可以了.
- VS2013 连接 Oracle出现尝试加载 Oracle 客户端库时引发 BadImageFormatException 32位与64位问题解决方案
摘自 :https://blog.csdn.net/similing/article/details/54318434 遇到这种问题是64位系统安装32位Oracle与VS2010的连接出现问题 解决 ...
- js的三种输出语句,以及html的运行循序
js最常见的三种输出语句 1.console.log()这个语句是在浏览器控制台输出的.进入网页点击f12可查看 2.alert()弹出一个对话框, 3.document.write这个语句是在页面输 ...
- ROS可视化工具RViz的简单使用教程
1.安装rviz sudo apt-get install ros-melodic-rviz 环境检测.安装 rosdep install rviz rosmake rviz startup(开两个 ...
- idea个人配置记录
idea.properties # Use ${idea.home.path} macro to specify location relative to IDE installation home. ...
- Go语言标准库之net/http
Go语言内置的net/http包十分的优秀,提供了HTTP客户端和服务端的实现. net/http介绍 Go语言内置的net/http包提供了HTTP客户端和服务端的实现. HTTP协议 超文本传输协 ...
- Shell: 定期存档日志文件
简介 对于日志的分割删除我们一般会使用logratate,但对于项目较多的情况下,会让开发直接将日志分割写在代码里面,对于分割后过期的日志定期删除就很有必要,不然膨胀的日志会占满你的磁盘,将多余的日志 ...
- meta的作用
一.先明白几个概念 phys.width: device-width: 一般我们所指的宽度width即为phys.width,而device-width又称为css-width. 其中我们可以获取ph ...