英文网站如何做关键词,wordpress班级模板,跨境电商无货源模式怎么做,网站采集被降权vertical-align 垂直对齐方式#xff1a; ①只对行内元素或者行内块元素有效#xff0c;所以该元素一定是子盒子#xff0c;且一定有父盒子。 ②想要调整哪个元素在父元素的垂直对齐方式#xff0c;就作用到哪个元素上。参照物是父盒子。 ③主要场景用在图片与文字在垂直方…vertical-align 垂直对齐方式 ①只对行内元素或者行内块元素有效所以该元素一定是子盒子且一定有父盒子。 ②想要调整哪个元素在父元素的垂直对齐方式就作用到哪个元素上。参照物是父盒子。 ③主要场景用在图片与文字在垂直方向上的居中对齐方式还有文字的上标和下标。 vertical-align 垂直对齐方式 html文字与图片显示排列方式vertical-align 属性的值使用场景1. 设置图片与文字在父元素垂直居中对齐2. 将子元素的顶端与图片的顶端对齐3. 设置文字上标、下标显示 html文字与图片显示排列方式
如下代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlehtml文本显示情况/titlestyle* {padding: 0;margin: 0;}.parent {width: 600px;font-size: 24px;border: 1px solid black;background-color: rgb(255, 152, 152);}.sub {background-color: skyblue;}/style
/head
body stylepadding: 30px;div classparent父元素-gg-rr1span classsub子元素-yy-rr1/spanimg src11.png alt/div
/body
/html如图所示图片默认的垂直对齐方式是在父元素的基线上。子元素在父元素上占满一行默认同父元素显示排列方式一样因为把图片去除父元素的高度就是文字的高度。 图片下面有多余的空白高度 空白高度清除方式 ①第一种方式图片向左浮动父元素清除浮动 ②第二种方式图片使用vertical-align:bottom;属性在父元素底端对齐方式 如下图所示 vertical-align 属性的值
属性值描述baseline默认。元素放置在父元素的基线上。sub设置该元素为文本的 下标 对齐方式super设置该元素为文本的 上标 对齐方式top把元素的顶端与行中最高元素的顶端对齐text-top把元素的顶端与父元素字体的顶端对齐middle把此元素放置在父元素的中部。bottom把元素的顶端与行中最低的元素的顶端对齐。text-bottom把元素的底端与父元素字体的底端对齐。%使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
使用场景
1. 设置图片与文字在父元素垂直居中对齐
第一步将把图片元素放置在父元素的中部。
img {vertical-align: middle;
}如图所示 可以看到文字并不在中部区域子元素上部分区域与下部分区域不对等。 第二步 将子元素sub放置父元素的中部。
.sub {background-color: skyblue;vertical-align: middle;
}如图所示 这就实现了子元素与图片在父元素垂直方向上居中对齐。
2. 将子元素的顶端与图片的顶端对齐
将子元素sub设置为vertical-align: top;子元素的顶端就会与图片的顶端对齐 top属性值是把元素的顶端与行中最高元素的顶端对齐。 在前面看到父元素的高度是由图片高度撑开的所以父元素行中最高元素就是图片元素。
.sub {background-color: skyblue;vertical-align: top;
}如图所示
3. 设置文字上标、下标显示
第一种方式 设置文字上标下标html有专门的上标标签sup/sup和下标标签sub/sub
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title上标标签和下标标签/titlestylesup {font-size: 12px;}sub {font-size: 12px;}/style
/head
body stylepadding: 30px;div2022年卡塔尔世界杯supTM/sup/divdiv2022年卡塔尔世界杯subMM/sub/div
/body
/html第二种方式
使用vertical-align: super;设置上标使用vertical-align: sub;设置上标
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title上标标签和下标标签/titlestyle.sup {font-size: 12px;vertical-align: super;}.sub {font-size: 12px;vertical-align: sub;}/style
/head
body stylepadding: 30px;div2022年卡塔尔世界杯span classsupTM/span/divdiv2022年卡塔尔世界杯span classsubMM/span/div/body
/html两种方式效果如图所示
