font-size不同时文字对齐

一行文字中,如果文字大小(font-size)不同时,文字不能垂直居中对齐例:

<p>对不齐啊,对不齐<span style="font-size:30px;">140</span>啊</p>

这行文字,会以最大字体的基线为准对齐,也就是,这行文字靠底对齐,不能垂直居中对齐,就是设置了height:30px;line-height:30px;也不能居中,这个行高会导致最大字体的能居中,如果想他们能居中对齐的话,这时候就必须设置两个line-height

外面的一层行高设置大点,里面的行高设置小点就可以对齐

总结:文字是以底线为准靠基线对齐(不管字体大小)

添加随笔 标题： 请输入标题 内容:【推荐客户端:Live Writer】 {回车产生<p>, Shift+Enter产生<br/>, Tab键产生缩进; } (不允许发布任何与政治相关的内容) 请输入内容 <table><tbody> <tr class="mceFirst"> <td class="mceToolbar mceLeft mceFirst mceLast"> <table><tbody><tr> <td class="mceToolbarStart mceToolbarStartListBox mceFirst"> <span> </span><br> </td> <td> <table><tbody><tr> <td class="mceFirst"><a>段落</a></td> <td class="mceLast"> <a><span> </span></a><br> </td> </tr></tbody></table> </td> <td> <table><tbody><tr> <td class="mceFirst"><a>字体</a></td> <td class="mceLast"> <a><span> </span></a><br> </td> </tr></tbody></table> </td> <td> <table><tbody><tr> <td class="mceFirst"><a>字体大小</a></td> <td class="mceLast"> <a></a><br> </td> </tr></tbody></table> </td> <td><br></td> <td> <table><tbody><tr> <td class="mceFirst"> <a></a><br> </td> <td class="mceLast"> <a></a><br> </td> </tr></tbody></table> </td> <td> <table><tbody><tr> <td class="mceFirst"> <a></a><br> </td> <td class="mceLast"> <a></a><br> </td> </tr></tbody></table> </td> <td><br></td> <td> <a></a><br> </td> <td> <a></a><br> </td> <td> <a></a><br> </td> <td> <a></a><br> </td> <td><br></td> <td> <a></a><br> </td> <td> <a></a><br> </td> <td><br></td> <td> <a></a><br> </td> <td> <a></a><br> </td> <td> <a></a><br> </td> <td class="mceToolbarEnd mceToolbarEndButton mceLast"><br></td> </tr></tbody></table> <table><tbody><tr> <td class="mceToolbarStart mceToolbarStartButton mceFirst"><br></td> <td> <a></a><br> </td> <td> <a></a><br> </td> <td> <a></a><br> </td> <td> <a></a><br> </td> <td> <a></a><br> </td> <td><br></td> <td><br></td> <td> <a></a><br> </td> <td> <a></a><br> </td> <td> <a></a><br> </td> <td><br></td> <td> <a></a><br> </td> <td> <a></a><br> </td> <td> <a></a><br> </td> <td><a></a></td> <td> <a></a><br> </td> <td><a></a></td> <td><br></td> <td><a></a></td> <td><a></a></td> <td><br></td> <td> <a></a><br> </td> <td> <a></a><br> </td> <td class="mceToolbarEnd mceToolbarEndButton mceLast"><br></td> </tr></tbody></table> </td> </tr> <tr> <td class="mceIframeContainer mceFirst mceLast"><br></td> </tr> <tr class="mceLast"> <td class="mceStatusbar mceFirst mceLast"> <div>p </div> </td> </tr> </tbody></table> 选项 个人分类: CSS HTML JS php+smarty 杂乱 总结 » 博客园首页发布选项 博客园首页是指博客园网站首页(http://www.cnblogs.com)，不是您的博客首页。 对发布到首页精华区的随笔要求：原创、思考与写作时间在1小时以上，能够让读者有真正的收获。 下列类型的随笔不允许发到首页精华区，否则您的帐户将会被限制： 1) 转载；2) 只有代码；3) 简单的提问；4) 软件发布；5)人才招聘；6) 包含推广或广告内容；7）活动信息；8)关闭评论功能的随笔；9）不完整的内容。 首页候选区是首页精华区的投稿区，如果您发在首页候选区的随笔符合首页精华区的要求，就会被选入首页精华区。 注：1小时内首页精华区与首页候选区只能发布一篇随笔。 发布到首页候选区 发布到首页精华区 网站分类: 注：请为您的随笔选择最合适的分类，请不要发布在不相关的分类中，否则您的帐户会被取消网站分类发布权限。 .NET技术： .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF WF XNA VS2010 ASP.NET MVC 编程语言： Java C++ PHP Delphi Python Ruby C 软件设计： 架构设计 面向对象 设计模式 Web前端： Html/Css JavaScript jQuery HTML5 企业信息化： SAP SharePoint GIS技术 Oracle ERP Dynamics CRM 企业信息化其他 手机开发： Android开发 iPhone开发 Windows Mobile 其他手机开发 Windows Phone 软件工程： 敏捷开发 项目与团队管理 软件工程其他 数据库技术： SQL Server Oracle MySQL 其他数据库 操作系统： Windows 7 Windows Server Linux 其他分类： 非技术区 软件测试 代码与软件发布 计算机图形学 Google开发 程序人生 求职面试 读书区 转载区 Windows CE 翻译区 开源研究 Flex 其他技术区 取消选择 高级选项 发布 允许评论 禁止匿名评论 显示在我的主页 显示在RSS中 在RSS中总是显示全文 置顶 只允许注册用户访问 EntryName(随笔或文章地址别名,只能使用字母、数字、-连字符、_下划线,不超过150个字符) EntryName只能使用字母、数字、-、_ 摘要(文章篇幅较长或包含多张图片,建议使用摘要方式发布,需要选中"使用摘要方式发布") 摘要内容:  插入摘要右侧图片 (博客园首页及网站分类始终以摘要方式显示,不受该选项影响) Tag标签: 插入已有标签 (多个关键字之间用“,”分隔，最多不超过10个) TrackBack地址: (向引用的文章发送TrackBack) 在RSS中的播客链接(音频或视频文件地址): (会在RSS中显示enclosure元素) 密码保护:  发布 存为草稿 取消