-
- 百事可爱i 2021-09-02
vertical-align：text-top/text-bottom
实际作用
- 0赞 · 0采集
-
- pinzaghi 2019-08-19
表情图标使用文本底部比较合适，不受行高以及其他内联元素影响
-
截图0赞 · 1采集
-
- pinzaghi 2019-08-19
元素vertical-align垂直对齐的位置与前后的元素都没有关系，只与父级的content-area有关，content-area意味着与line-height无关，与font-size有关
-
截图0赞 · 0采集
-
- pinzaghi 2019-08-19
vertical-align为text-top和text-bottom时的表现
-
截图0赞 · 0采集
-
- 慕盖茨5287063 2019-06-17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
height: 380px;
border:1px solid;
}
p{
font-size: 40px;
background: lightgray;
}
.timg{
vertical-align: text-top;
width: 120px;
}
.bimg{
vertical-align:text-bottom;
width: 120px;
}
span{
display: inline-block;
}
</style>
</head>
<body>
<div class="box">
<p><img class="timg" src="img/mm2.png" /><span style="font-size: 20px;vertical-align: top;">20px</span><span style="font-size: 24px;">24px</span><span style="font-size: 32px;">32px</span><span style="font-size: 40px;">40px</span></p>
<br />
<br />
<br />
<p><img class="bimg" src="img/mm2.png" /><span style="font-size: 20px;vertical-align: top;">20px</span><span style="font-size: 24px;">24px</span><span style="font-size: 32px;">32px</span><span style="font-size: 40px;">40px</span></p>
</div>
</body>
</html>
-
截图0赞 · 0采集
-
- 你是漂亮的天蓝色 2019-05-04
vertical-align文本类属性：
1、vertical-align：text-top/text-bottom；
盒子的顶部/底部与父级content area的顶部/底部对齐
- 0赞 · 0采集
-
- 你是漂亮的天蓝色 2019-05-04
两个元素类似，但是它们不对齐
- 0赞 · 0采集
-
- 简简单单ap 2018-11-02
vertical-align的text-top、text-bottom属性垂直对齐位置与前后的元素都没有关系， 与行高line-height也没有关系，只与字体大小font-size有关。
常用案例 表情图片或原始尺寸图片与文字对齐， 则用vertical-align：text-bottom
- 0赞 · 1采集
-
- 多汁的西瓜 2017-11-14
- text-top和text-bottom 与父元素字体大小有关，不受行高以及其他内联元素影响
-
截图0赞 · 0采集
-
- 小社 2017-10-28
- 文本类型与大环境有关
-
截图0赞 · 0采集
-
- 南宁吴彦祖 2017-10-28
- text-top和text-bottom 与父元素字体大小有关，不受行高以及其他内联元素影响
-
截图0赞 · 0采集
-
- 南宁吴彦祖 2017-10-28
- text-top和text-bottom 是根据父元素默认的字体大小去对齐相应的字体大小的区域
-
截图0赞 · 0采集
-
- qq_梦想成真_2 2017-10-26
- vertical-align:text-bottom 和text-top 应用例子和适用场景
-
截图0赞 · 0采集
-
- qq_梦想成真_2 2017-10-26
- vertical-align 文本属性
-
截图0赞 · 0采集
-
- orangewangjie3473319 2017-07-10
- 表情文字对齐 用vertical-align: text-bottom比较好
-
截图0赞 · 1采集
-
- orangewangjie3473319 2017-07-10
- 实际应用场景
-
截图0赞 · 0采集
-
- orangewangjie3473319 2017-07-10
- text-top text-bottom 只与font-size有关
-
截图0赞 · 0采集
-
- orangewangjie3473319 2017-07-10
- 蓝色的背景可以近似的看作 content-area
-
截图0赞 · 0采集
-
- orangewangjie3473319 2017-07-10
- vertical-align： text-top 和text-bottom
-
截图0赞 · 0采集
-
- 慕田峪5295544 2017-06-27
- vertical-align：text-top（bottom）的实际作用
-
截图0赞 · 0采集
-
- 慕田峪5295544 2017-06-27
- 注意：
-
截图0赞 · 0采集
-
- 慕田峪5295544 2017-06-27
- vertical-align:text-top; vertical-align:text-bottom;
-
截图0赞 · 0采集
-
- 单单happy 2017-06-18
- vertical-align:text-top; vertical-align:text-bottom;
-
截图0赞 · 0采集
-
- MIT的梦 2017-04-05
- vertical-allign的注意
-
截图0赞 · 0采集
-
- qq_Grace静_0 2017-03-15
- 实际应用：图标文本对齐 （表情图片/原始尺寸背景图标与文字的对齐效果）
-
截图0赞 · 1采集
-
- qq_Grace静_0 2017-03-15
- vertical-align：text-top（bottom）
-
截图0赞 · 0采集
-
- _莫忘初衷_ 2017-03-03
- 图标文本对齐vertical-align:text-bottom相比于其他元素的的好处
-
截图0赞 · 0采集
-
- _莫忘初衷_ 2017-03-03
- vertical-align:text-top; vertical-align:text-bottom vertical-align:text-top,盒子的顶部和父级content area的顶部对齐。 vertical-align:text-bottom,盒子的低部和父级content area的低部对齐。 盒子的顶部(底部)和父级的顶部(底部)对齐 1.元素vertical-align垂直对齐的位置与前后的元素都没有关系； 2.元素vertical-align垂直对齐的位置与行高line-height没有关系，只与父级字体大小font-size有关； 表情图片(或原始尺寸背景图标)与文字的对齐效果 1、Baseline:使用基线的问题在于图标偏上； 2、bottom:使用顶线/底线的问题在于受其他内联元素影响，造成巨大定位偏差； 3、middle:使用中线也是不错的选择，但需要恰好的字体大小以及兼容性要求不高； 4、text-bottom:使用文本底部较合适，不受行高以及其他内联元素影响；
-
截图0赞 · 0采集
-
- 慕粉4366429 2017-01-18
- vertical-align:text-bottom实用例子
-
截图0赞 · 0采集
-
- 慕粉4366429 2017-01-18
- vertical-align：text-top与text-bottom定义 兼容性很好（IE6，IE7都支持）
-
截图0赞 · 0采集
