css中图片于文本的基线对齐与vertical-align属性设置
发布时间：2013-04-02 15:22:36 作者：佚名 
我要评论
我要评论默认的情况是图片顶对齐而文字底对齐，通过设置css属性可以使得图片与文字对齐，接下来为大家详细介绍下设置各对象的vertical-align属性，感兴趣的朋友可以参考下哈
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
文字旁边搭配图片时，发现图片比文字靠上，原来默认的情况是图片顶对齐而文字底对齐，通过设置css属性可以使得图片与文字对齐。
设置各对象的vertical-align属性，属性说明：
baseline－将支持valign特性的对象的内容与基线对齐
sub－垂直对齐文本的下标
super－垂直对齐文本的上标
top－将支持valign特性的对象的内容与对象顶端对齐
text-top－将支持valign特性的对象的文本与对象顶端对齐
middle－将支持valign特性的对象的内容与对象中部对齐
bottom－将支持valign特性的对象的文本与对象底端对齐
text-bottom－将支持valign特性的对象的文本与对象顶端对齐
在此设置为text-bottom即可实现图片与文字位于同一水平线上，好看多了
如下：其他自己改
<span style="width:120px;"><img src="http://9i0i.com/pic.php?p=/images/New_16_blue.gif" style="vertical-align:text-bottom;"/>目标任务</span>
实现图片于文字的底端对齐
设置各对象的vertical-align属性，属性说明：
baseline－将支持valign特性的对象的内容与基线对齐
sub－垂直对齐文本的下标
super－垂直对齐文本的上标
top－将支持valign特性的对象的内容与对象顶端对齐
text-top－将支持valign特性的对象的文本与对象顶端对齐
middle－将支持valign特性的对象的内容与对象中部对齐
bottom－将支持valign特性的对象的文本与对象底端对齐
text-bottom－将支持valign特性的对象的文本与对象顶端对齐
在此设置为text-bottom即可实现图片与文字位于同一水平线上，好看多了
如下：其他自己改
复制代码
代码如下:<span style="width:120px;"><img src="http://9i0i.com/pic.php?p=/images/New_16_blue.gif" style="vertical-align:text-bottom;"/>目标任务</span>
实现图片于文字的底端对齐
相关文章
深入理解CSS中的vertical-align属性和基线问题
这篇文章主要介绍了深入理解CSS中的vertical-align属性和基线问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考2020-04-03- 本文向大家介绍一下CSS vertical-align 属性的用法，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。2014-10-22
css 垂直对齐 css中vertical-align属性(垂直对齐)的使用说明
这两天写个页面css的时候用到了vertical-align属性，使用过程中踩到了坑,因此整理了一些，以备不时之需，感兴趣的朋友可以了解下哦2013-01-09- 网页制作Webjx文章简介：CSS实例:vertical-align属性让网页层居中. vertical-align属性使网页层居中 网页源代码如下： <html> <head> &2009-04-02
- vertical-align属性详细分析 最近几天仔细研究了一下vertical-align这个属性，结果让我大吃一惊，这个很“资深”的CSS标准竟然在各个浏览器里面的表现都各不相同2009-02-10
CSS中的vertical-align用于设置行内块或者行内元素行内元素的对齐方式，使用过程中的坑很多，本文就详细的介绍一下vertical-align属性的具体使用方法，感兴趣的可以了解一2023-05-11
最新评论