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

最新推荐文章于 2024-05-25 16:58:53 发布

小圣贤君

最新推荐文章于 2024-05-25 16:58:53 发布

阅读量356

点赞数

分类专栏：前端开发文章标签： css

本文链接：https://blog.csdn.net/zhongguohaoshaonian/article/details/52294611

版权

前端开发专栏收录该内容

39 篇文章 1 订阅

订阅专栏

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，免去字体本身大小对内部空间的影响，达到绝对居中。

小圣贤君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS快速学习6：vertical-align讲解

Vertical-align属性设置元素的垂直对齐方式。说明该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。值描述长度通过距离升高（正值）或降低（负值）元素。'0cm'等同于'baseline'
复制链接

扫一扫