您的位置：首页 > Web前端 > CSS

CSS快速学习6：vertical-align讲解

2016-08-23 21:26 851 查看

Vertical-align属性设置元素的垂直对齐方式。

说明

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

值	描述
长度	通过距离升高（正值）或降低（负值）元素。'0cm'等同于'baseline'
百分值 – %	通过距离（相对于1line-height1值的百分大小）升高（正值）或降低（负值）元素。'0%'等同于'baseline'
baseline	默认。元素的基线与父元素的基线对齐。
sub	降低元素的基线到父元素合适的下标位置。
super	升高元素的基线到父元素合适的上标位置。
top	把对齐的子元素的顶端与line box顶端对齐。
text-top	把元素的顶端与父元素内容区域的顶端对齐。
middle	元素的中垂点与父元素的基线加1/2父元素中字母x的高度对齐。
bottom	把对齐的子元素的底端与line box底端对齐。
text-bottom	把元素的底端与父元素内容区域的底端对齐。
inherit	采用父元素相关属性的相同的指定值。

代码示例：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

.box1 {width:500px; height:500px; border:3px #000 solid; margin:0 auto; text-align:center;}

.box1 img {vertical-align:middle;}

.box1 span {width:0px; height:100%; display:inline-block; vertical-align:middle;}

.box2 {width:500px; height:500px; border:3px #000 solid; margin:0 auto; text-align:center; line-height:500px; font-size:0px;}

.box2 img {vertical-align:middle;}

</style>

</head>

<body>

<div class="box1">

<img src="images/haha.jpg"/><span></span>

</div>

<div class="box2">

<img src="images/haha.jpg"/>

</div>

</body>

</html>

说明：第一种方式，设置一个空的<span></span>作为参照，使<span>的高度为100%,那么图片设置vertical-align时，就会标齐<span>中间位置，达到图片居中效果。

第二种方式，不常用，用文档限制，只在html5中有效果。设置line-height为容器高度，字体大小为0，免去字体本身大小对内部空间的影响，达到绝对居中。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航