css中照片于文字的基准线对齐与vertical

日期:2021-01-20 类型:科技新闻 

关键词:小程序制作流程,抽奖小程序,微信小程序怎么开店,小程序码生成,小程序模版

文本周围配搭照片时,发现照片比文本靠上,原先默认设置的状况是照片顶对齐而文本底对齐,根据设定css特性可使得照片与文本对齐。

设定各目标的vertical-align特性,特性表明

baseline-将适用valign特点的目标的內容与基准线对齐
sub-竖直对齐文字的下标
super-竖直对齐文字的上标
top-将适用valign特点的目标的內容与目标顶端对齐
text-top-将适用valign特点的目标的文字与目标顶端对齐
middle-将适用valign特点的目标的內容与目标中部对齐
bottom-将适用valign特点的目标的文字与目标底端对齐
text-bottom-将适用valign特点的目标的文字与目标顶端对齐

在此设定为text-bottom便可完成照片与文本坐落于同1水平网上,漂亮多了
以下:别的自身改

拷贝编码
编码以下:

<span style="width:120px;"><img src="/images/New_16_blue.gif" style="vertical-align:text-bottom;"/>总体目标每日任务</span>

完成照片于文本的底端对齐