飞龙博客

feilong.org 前端开发教程

inline元素的垂直居中对齐妙法2种

飞龙修订于 20170511 06:48 90 次浏览

html和css结合,能变换很多奇妙效果。飞龙这节讲讲inline元素不支持height属性怎么办?怎么让inline元素内的文本实现垂直居中对齐?一般来说方法有2种。本日志举例说明,更新网址:http://feilong.org/inline-vertical-align 飞龙第4次修订于20101211 ,希望对您有用!

例子:a链接,默认inline元素

飞龙博客

方法一:让a链接实现文本垂直居中对齐,但保持a的默认inline属性

a.felongverticalalign {

background-color:#fff;

color: #333;

font-size: 30px;padding:5px 10px;/* 飞龙提示:字号加上下padding值正好等于line-height */

line-height: 40px;

}

方法二:让a链接实现文本垂直居中对齐,把a的默认inline属性转化为block属性

a.felongverticalalign {

background-color:#fff;

color: #333;

font-size: 30px;

display:block;height: 40px;line-height: 40px;/* 飞龙提示:默认inline转为block,height与line-height等值。无须padding。 */

}

由上例子可知,默认inline元素,不支持width/overflow/height,但是支持padding,可以实验是否支持margin?

如果想自动裁切文本,须采用方法二,把默认inline属性转化为block属性,然后设宽高以及overflow。......

付费查看剩下内容

网址:https://feilong.org/inline-vertical-align
初发:20170511 06:48

想学前端?长按二维码加我微信

想学前端?点击飞龙QQ

分类: 网站开发

新作:

旧文:

  • 言色和悦对父母
    有无相通待亲友
关闭

长按二维码 -> 识别图中二维码

打开微信,发现,扫一扫

支付完成后,点击下一步

感谢大力支持

然后你手机号:

最后点这,稍等即可