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

CSS属性：vertical-align详解

2020-06-29 04:51 357 查看

文章推荐 link1 link2 link3

Vertical-align属性

  • Vertical-align被用于垂直对齐inline元素，inline-block元素，以及inline-table的元素
  • inline元素基本上指的就是文本，inline-block元素基本上指图片，inline-table基本上指的表格

文字对齐

基本介绍

  • baseline：将元素x的基线与其父元素x的基线对齐
  • middle：将元素行高的中间与父对象x的基线对齐，再加上父对象的x高度的一半
  • top：将元素的顶部及其后代与整个行的顶部对齐
  • bottom：将元素的底部及其后代与整行的底部对齐
  • 允许指定长度值和百分比值，在与基线对齐的基础上正值向上，负值向下
<style type="text/css">
div{
font-size: 100px;
border: 10px solid red;
}
span{
font-size: 20px;
border: black solid 5px;
/*vertical-align: baseline;*/
/*vertical-align: top;*/
/*vertical-align: middle;*/
/*vertical-align: bottom;*/
vertical-align: -100px;
}
</style>

<body>
<div>index
<span>xxx</span>
</div>
</body>

baseline对齐

middle对齐

top对齐

图片对齐

块元素中的图片

  • 块元素中的图片默认与基线对齐，所以下面由空隙
  • 只需要将Vertical-align的值改为非baseline，就可解决


图片与文字

表格对齐

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航