inline元素的垂直居中对齐妙法2种
飞龙更新于 2017-05-11 06:48 加入书签 CTRL+D 有 65 个朋友来过html和css结合,能变换很多奇妙效果。飞龙这节讲讲inline元素不支持height属性怎么办?怎么让inline元素内的文本实现垂直居中对齐?一般来说方法有2种。本日志举例说明,更新网址:http://feilong.org/inline-vertical-align 飞龙第4次修订于20101211 ,希望对您有用!
例子:a链接,默认inline元素
<a href="http://feilong.org" title="feilong" class="felongverticalalign">飞龙博客</a> |
方法一:让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。
维护小站,感谢赞赏。
联系飞龙,请转淘宝。
飞龙初发:
2017-05-11 06:48
本文更新网址:
https://feilong.org/inline-vertical-align
所在目录: 网站开发