首页 话题 小组 问答 好文 用户 我的社区 域名交易

[分享]css中a标签垂直居中

发布于 2024-11-11 19:23:02
0
10

CSS中的a标签是常用的链接标签,我们经常需要将其垂直居中以美化页面。下面介绍几种实现方法。方法1:设置行高与height相等 a{ display:inlineblock; height:30px;...

CSS中的a标签是常用的链接标签,我们经常需要将其垂直居中以美化页面。下面介绍几种实现方法。

方法1:设置行高与height相等 
a{
display:inline-block;
height:30px;
line-height:30px;
} 

解释:将a标签设置为inline-block元素,再将height和line-height设置为相同的值,就可以实现垂直居中。

方法2:定位加负边距 
a{
display:inline-block;
position:relative;
top:50%;
transform:translateY(-50%);
} 

解释:将a标签设置为inline-block元素,将position设置为relative,top设置为50%,此时a标签会相对于其父元素向下移动50%的高度。再使用transform的translateY将其向上移动50%的高度以实现垂直居中。

方法3:绝对定位加父元素padding 
a{
position:absolute;
top:50%;
transform:translateY(-50%);
width:100%;
height:100%;
}
.parent{
position:relative;
padding-top:30px;
} 

解释:将a标签设置为absolute定位,再设置top为50%,使用transform的translateY将其向上移动50%的高度。其父元素设置为relative定位,再给其上方留出与a标签高度相同的padding即可。

评论
91云脑
Lv.1普通用户

62845

帖子

12

小组

80

积分

站长交流