飞龙博客

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

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

所在目录： 网站开发

新作：全选反选飞龙jQuery解决方案优化版

旧文：表格table标题内容一行显示多的用省略号