实现垂直居中 和 vertical-align
来源:互联网 发布:数据库架构师 编辑:程序博客网 时间:2024/05/17 15:19
关于vertical:
1、定义和用法
vertical-align 属性设置该元素相对于所在行基线的垂直对齐方式。
只对行内元素(a,span,img等)的基线相对于该元素所在行的基线的垂直对齐(允许负值)。
2、实例列举
①
img标签的vertical-align: text-top
img标签的vertical-align: bottom
3、另一种用法:
在具有valign属性的表格元素(td、th)中,vertical-align等效于valign,规定单元格中内容的
垂直排列方式。
th,td{
width: 50px;
height: 50px;
vertical-align: bottom;
}
关于实现垂直居中的几种方式:
1、文本类居中
①单行文本居中:
如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和
所在行的高度line-height相等即可。
如:
div {
height:25px;
line-height:25px;
overflow:hidden;
}
②未知行数的多行文本居中
如果一段内容,它的高度是可变的那么我们就可以使用设定Padding,使上下的padding值
相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把<div>完全
填充的一种访求而已。可以使用类似下面的代码:
div {
padding:25px;
}
③利用 vertical +line-height配合
.父元素{
lineheight:500px
}
.子元素{
display:inline-block;
vertical-align:middle
}
即可实现子元素在父元素line-height范围内的居中
2、其他元素类的居中
①需要居中的元素与父级元素大小相差不多:
利用margin-top和margin-left实现居中
②元素与父元素大小相差较大时:
利用position:50%居中,在利用 负的 margin调整元素自身大小带来的偏差
③利用display修改框模型
利用修改display,模拟出 table中td、th等具有的valign垂直对齐属性,
父元素: display:table;
vertical-align:middle;
子元素: display:table-cell;
④利用 绝对定位+margin:auto
.父元素{
position:relative;
width:1000px;
height:1000px;
}
.子元素{
margin:auto;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
}
⑤利用弹性盒模型
div{<span style="white-space:pre"></span>display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本语法: IE 10 */ display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */ /*垂直居中*/ /*老版本语法*/ -webkit-box-align: center; -moz-box-align: center; /*混合版本语法*/ -ms-flex-align: center; /*新版本语法*/ -webkit-align-items: center; align-items: center; /*水平居中*/ /*老版本语法*/ -webkit-box-pack: center; -moz-box-pack: center; /*混合版本语法*/ -ms-flex-pack: center; /*新版本语法*/ -webkit-justify-content: center; justify-content: center; margin: 0; height: 700px; width: 100% /* needed for Firefox */}
- 实现垂直居中 和 vertical-align
- vertical-align垂直居中
- vertical-align垂直居中
- 关于vertical-align实现图片垂直居中
- vertical-align: middle垂直居中
- 关于垂直居中vertical-align
- vertical-align用法 垂直居中
- vertical-align垂直居中无效
- 利用vertical-align:middle实现垂直居中对齐
- CSS实现垂直居中,vertical-align:middle怎么用
- 简单理解css中的垂直居中和水平居中,即vertical-align和text-align属性
- vertical-align属性与垂直居中
- vertical-align: middle;垂直居中精髓
- 利用vertical-align:middle垂直居中
- CSS 水平居中text-align、垂直居中 vertical-align
- 实现icon和文字垂直居中的两种方法-(vertical-align and line-height)
- vertical-align:middle在表单,img与文字实现垂直居中问题
- vertical-align:middle在表单,img与文字实现垂直居中问题
- Transactional超时时间控制
- 九度 OJ 1064:反序数
- Change Column in MySQL
- hbase Java API 简介
- 常用的正则表达式的运用--学习笔记(二)
- 实现垂直居中 和 vertical-align
- grep 命令详解
- android:layout_gravity和android:gravity的区别
- 面试题4:替换空格
- Linphone探索:1 . Linphone官方源码探究
- iOS 设备类型和版本判断
- Sketch 快速创建调色板技巧(PS 同样适用)
- msp430之__delay_cycles精确延时的说明及改正
- 打开淘宝,传参过去,在淘宝里购买商品(转载)