CSS中的a标签是常用的链接标签,我们经常需要将其垂直居中以美化页面。下面介绍几种实现方法。方法1:设置行高与height相等 a{ display:inline-block; 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即可。
粉丝
0
关注
0
收藏
0