css baseline是什么意思

html-css013

css baseline是什么意思,第1张

你小学时学英语用过那种英语作业本就是四条横线用来写英文字母的吧？这四条线的第三条线就是baseline，即基线的意思，也就是小写字母g的那个圆圈的底边所接触的那条线！所谓“基线对齐”就是指对齐那条线。

设置各对象的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="/images/New_16_blue.gif" style="vertical-align:text-bottom"/>目标任务</span>

实现图片于文字的底端对齐

align-items:center；对齐方式如下：

center，位于容器的中心

flex-start，位于容器的开头

flex-end，位于容器的结尾

baseline，位于容器的基线上。

initial，设置该属性为它的默认值

inherit，从父元素继承该属性

希望对你有所帮助，望采纳！