深入理解 vertical-align

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012062760/article/details/52999416

关于vertical-align属性的值

  1. inherit: 继承
  2. 线类: 可选baseline (默认属性值),top,middle,bottom
  3. 文本类: text-top,text-bottom (文本上下边缘)
  4. 上标下标类: sub,super
  5. 数值百分比类: 20px,2em,20% …(支持负值)

vertical-align的数值百分比类型的值

  1. 数值的含义:在baseline对齐基础上上下偏移对应的数值大小,比如值为1px就是在默认(baseline)基础上上移1像素,1em就是上移一个字体大小。
  2. 然而对于百分比来说,它是相对于line-height来计算的。
    比如指定line-height:30px;vertical-align:-10%;那么实际上vertical-align的值就是-3px,也就是在基线对齐的基础上,下移3px。

适用情况

只适用于inline,inline-block,table-cell (td标签)元素
所以对p标签或是div等元素设置此属性,不会有任何作用。 (当然,除非你修改了display属性)
既然如此,我们就可以利用这种情况处理一些特殊情况。比如一个块级元素中有一个img元素,img元素会因为其默认vertical-align属性以及隐匿元素的存在而导致下方有空隙,那么解决的办法之一就是将img元素块状化。
*(上面谈到的情况,除了块状化之外,还有方法如下:
1. 将img元素的vertical-align属性变为bottom,即img元素与隐匿元素的底边对齐,或是middle,即中线对齐,或是top。
2. 改变line-height


关于vertical-align的middle值

定义:inline/inline-block元素:元素的垂直中心点和父元素基线上1/2x-height处 (就是说元素和后面隐匿的x字符中心点对齐)

这么来说的话,当对图片设置middle属性时,其与后面的隐匿x中心线对齐了,又因为容器的高度是line-height撑开的,如果将lin-height设置为0,那么line-height将作为一条线横亘在x所占内容区域的中间;所以当line-height不为0的时候,其中心线也在x所占内容区域的中间。然而x字符的中间,与其所在内容区域的中间,并不是重叠的!(要看字体类型)所以,设置middle的图片的中线并没有精确的与容器的中线重叠! (内容区域可理解为鼠标滑动选中该字符的蓝色背景区域)


关于vertical-align的文本类值

text-top:盒子的顶部和父级content area的顶部对齐
text-bottom:盒子的底部和父级content area的底部对齐
还有两点需要注意:
1. 使用该属性后,vertical-align的效果与元素前后的其他元素没有任何关系
2. 此属性作用时候与line-height没有任何关系,只与font-size相关


综上:至少两个可以使用vertical-align的地方:
1. 小图标和文字对齐(使用负的数值)
2. 使图片或是多行文字居中

视频中说使图片居中的方式:
1. 使图片或是多行文字inline-block化
2. 在元素后跟一个height为100%空i标签元素
3. 元素和i元素都使用vertical-align:middle


本次问题

  1. 行高会改变基线的位置吗?

相关代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vertical-align</title>
</head>
<body>
    <p style="background-color: #ccc">我是左边<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAABXCAIAAABURUrCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKuSURBVHhe7doxcuowFIVhlZSUlCyBJVCyBEpKSnbAMlyyBEqWwTIoKSnJmfjiUcSYSYivdGTOVwU7mefRjyWZR7gLMeWhpjzUlIea8lBTHmrKQ015qCkPNeWhpjzUlIea8lBTHmrKQ015qCkPNeWhVibP6XRaLpeHw8FeS48yeWazWQhhMpnYa+mRO8/xeJzP52jTsqMP7V3VNI29/nhZ81wuF9wxViaE9XptJx66cvhht9vh9+3Ep8qaZ7vdtqMPaHO73ezEA5LYaWfIX8XKlykPZq14TsMUZyd+QrDNZmO/5KyKlS9TnnYv0FqtVna0H/otFgv7Azf2jxHLcYm4dWw8eua0nOI3ih0iluMSeUbker3adYSAhdCOEnMfL+y+bDyKjkiy+IGd4OZ7lfFTDtYSO1pCfAfDb9Y/Bo55kqecvt1aBvv93i6ini11yzFP/BBT6t2azGnPD8LkHPN080nB+ybZ0JfdNL7BK0/TNDYqRRdhuwKCDf17vMaue9uWmk+wwMTTmh2tjct1x48XRd6z8V4AqltyOsPnwUoznU5tYEq8bZ/b1DittYYfvmQ1tqO5xG1q3Askhs9jYxNC/seLkbUBxzz2Oov44wkYRxsYQ57k44nRtIG68yS7Z6h6I/Cs4jzxk2+r4McTTmrNg0erSj+E/pPhB7FbBs7nsx0a1POENqbZLDF8Hsz+Nmzfn94P+6W15JETRnnTdIbPg5vGRs4Z2lf0PzfvcVkh4u+zeRjT1vk1xwUcI+jxpbWRbZ1fc8wj/6c81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeYjd71+Dz3ZXj6A4AAAAAABJRU5ErkJggg==" alt="" style="vertical-align: middle;">我是右边</p>
    <p>当我对内联元素适用vertical-align属性后,马上起了作用(并没有说垂直居中了,而是说有了vertical-align为middle的效果了)。</p>
    <br />
    <br />
    <p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAABXCAIAAABURUrCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKuSURBVHhe7doxcuowFIVhlZSUlCyBJVCyBEpKSnbAMlyyBEqWwTIoKSnJmfjiUcSYSYivdGTOVwU7mefRjyWZR7gLMeWhpjzUlIea8lBTHmrKQ015qCkPNeWhpjzUlIea8lBTHmrKQ015qCkPNeWhVibP6XRaLpeHw8FeS48yeWazWQhhMpnYa+mRO8/xeJzP52jTsqMP7V3VNI29/nhZ81wuF9wxViaE9XptJx66cvhht9vh9+3Ep8qaZ7vdtqMPaHO73ezEA5LYaWfIX8XKlykPZq14TsMUZyd+QrDNZmO/5KyKlS9TnnYv0FqtVna0H/otFgv7Azf2jxHLcYm4dWw8eua0nOI3ih0iluMSeUbker3adYSAhdCOEnMfL+y+bDyKjkiy+IGd4OZ7lfFTDtYSO1pCfAfDb9Y/Bo55kqecvt1aBvv93i6ini11yzFP/BBT6t2azGnPD8LkHPN080nB+ybZ0JfdNL7BK0/TNDYqRRdhuwKCDf17vMaue9uWmk+wwMTTmh2tjct1x48XRd6z8V4AqltyOsPnwUoznU5tYEq8bZ/b1DittYYfvmQ1tqO5xG1q3Askhs9jYxNC/seLkbUBxzz2Oov44wkYRxsYQ57k44nRtIG68yS7Z6h6I/Cs4jzxk2+r4McTTmrNg0erSj+E/pPhB7FbBs7nsx0a1POENqbZLDF8Hsz+Nmzfn94P+6W15JETRnnTdIbPg5vGRs4Z2lf0PzfvcVkh4u+zeRjT1vk1xwUcI+jxpbWRbZ1fc8wj/6c81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeagpDzXloaY81JSHmvJQUx5qykNNeYjd71+Dz3ZXj6A4AAAAAABJRU5ErkJggg==" alt="" style="float: left; vertical-align: middle;">xxxxxxxxxxxx</p>
    <p>图片被浮动后显示的display属性为: block,此时使用vertical-align不再起作用</p>
    <br />
    <br />
    <button style="display: inline-block; line-height: 0px; height: 50px" >行高为0</button>
    <button style="display: inline-block; height: 50px" >行高正常</button>
    <br />
    <br />
    <span style="display: inline-block; width: 150px; height: 150px; border: 1px solid #f00; background-color: #ccc;"></span>
    <span style="display: inline-block; width: 150px; height: 150px; border: 1px solid #f00; background-color: #ccc;">x-baseline</span>
    <p>看到上面这个奇怪的现象了吗,之所以会这样是因为:<span style="color: #f00">一个inline-block元素,如果里面没有内容,那么其基线就是其底边缘;否则其基线就是最后一个元素的基线。</span>第一个方块的基线是底边,第二个方块的基线则是内部元素的基线,也就是x字母的底部,两者对齐!!</p>
    <br />
    <br />
    <span style="display: inline-block; width: 150px; height: 150px; border: 1px solid #f00; background-color: #ccc; font-family: 微软雅黑;"></span>
    <span style="display: inline-block; width: 150px; height: 150px; border: 1px solid #f00; background-color: #ccc; line-height: 0; font-family: 微软雅黑;">x-baseline</span>
    <p>当我们把第二个元素的行高设置为0后,出现了这样的情况!<span style="color: #f00;"> 是因为行高为0后,该内容区域的高度就变成了0,实际高度即为0。又因为行高能让字符居中,其为0后也就出现在了内容区域的中间。</span>这样一来,字符出现在框外也就不足为奇了!又因为上面的解释,这第二个框的基线仍然是内其中字符的基线,所以整体情况变成如此。</p>
    <br />
    <br />
    <div style="font-size: 32px; font-family: 微软雅黑; border: 1px solid #ccc; background-color: #ccc"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAABXCAIAAABURUrCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADXSURBVHhe7dExDQAwDMCwAelZ/szKYTRyWDIDv5slS0+anjQ9aXrS9KTpSdOTpidNT5qeND1petL0pOlJ05OmJ01Pmp40PWl60vSk6UnTk6YnTU+anjQ9aXrS9KTpSdOTpidNT5qeND1petL0pOlJ05OmJ01Pmp40PWl60vSk6UnTk6YnTU+anjQ9aXrS9KTpSdOTpidNT5qeND1petL0pOlJ05OmJ01Pmp40PWl60vSk6UnTk6YnTU+anjQ9aXrS9KTpSdOTpidNT5qeND1petL0pOkJm/21lSeot+fxjgAAAABJRU5ErkJggg==" alt="" style="vertical-align: text-top;"><span style="font-size: 24px">24px</span><span style="font-size: 32px">32px</span><span style="font-size: 50px">50px</span></div>
    <p>vertical-align的值为text-top时,可以发现图片的顶线和父级元素内容区域(学习line-height时了解到,内容区域的高度只与font-size相关),所以由于我们给div设置了32像素大小的字体,那么其必然是和32像素的字体的内容区域的顶部对齐!</p>
    <br />
    <br />
    <div style="font-size: 32px; font-family: 微软雅黑; border: 1px solid #ccc; background-color: #ccc"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAABXCAIAAABURUrCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADXSURBVHhe7dExDQAwDMCwAelZ/szKYTRyWDIDv5slS0+anjQ9aXrS9KTpSdOTpidNT5qeND1petL0pOlJ05OmJ01Pmp40PWl60vSk6UnTk6YnTU+anjQ9aXrS9KTpSdOTpidNT5qeND1petL0pOlJ05OmJ01Pmp40PWl60vSk6UnTk6YnTU+anjQ9aXrS9KTpSdOTpidNT5qeND1petL0pOlJ05OmJ01Pmp40PWl60vSk6UnTk6YnTU+anjQ9aXrS9KTpSdOTpidNT5qeND1petL0pOkJm/21lSeot+fxjgAAAABJRU5ErkJggg==" alt="" style="vertical-align: text-bottom;"><span style="font-size: 24px">24px</span><span style="font-size: 32px">32px</span><span style="font-size: 60px">60px</span></div>
    <p>同上</p>
    <br />
    <br />
    <p style="font-size: 14px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAIAAABL1vtsAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAQCSURBVDhPrVF7TFNXHO4fc5FsQRYN0w5h7hHUbXGbY1LZCIbgBGHAIMzHNEPnRDcDZnMq4EAxPDYYWDPtFAq2GCoGa5nYYkF5CMoqpbS0llqgW4HespbHoOvrnnP3u3CzkLHx1758OTn3O9/33d+5l7UQDnW0vT3Q0uhDyP2IpucIuS/sQQGdcSwCh/Yja/Nyz6+5eEqEXa3YPUi5VZSzBU0Jke0Hp2EXnDo0cYx7IeBVUIEmJXisGBGn8Xg5NVVHTf8MK7bzsOUUJr5F1rMzqvfByWTmA9RpTQI5XotMqWCl8zO3Kdcvs1N0QhG2X8SWTDhF1qI/usP+2TKl3g8qGuOioT3IfBgTZ/CEgHI0Ux4t5TXSLY47UAqDIPMh2kMUgB9STB4wWOeDR7KQIW624hAmcvFEFcQoVw/dArPMNOLJaminCR5wmo9AisnbFLH2rvfQUJq3P153LUYliB2UpkzqS5lBnC2Q91j5oDyRJCurYk3SePQkAekifm99CbJ0xVD9CmQ6CJJRHGXrTETGZJowy4SA5mT13AhwOzSwAzgijwGC36XZClm6Ql/zNDmcg/rCvI+jkTHJ0pnYJ46wKD6hrz2aia1nIUyOnh64l9J3M9L+KAk8pD4a6cLJwf2QpSsUPz2DzUe96s32B+HCvQFXU1+sy3idXtNfpVvMR8ZVn5Z/yK49vBb0y3HPi9KCPNpIUrMZmY9Blq5oK13iGUgdfxhy8vK5283fwQE04uHjeOQEfSP4i6bPMJGPR7NB8ZpPlV0v51/7elqxEfaQpSvulSzpb0/aK+z4QDndLtsBb0D92xnOfZd5dGkiJXcFUR1TX/zII9RfQpau4OZv+1g8VDJM7uv58/vU9ZUH2Isz7+SBM3bym153Aq+rpiCIJElWVKnqRIfn4mO8q2HsQlpYW3W+vqPeYlTZftNTs/C6nfAI7JVXN5xLP7pzS2av87wWH7zjSMytdLlcrOMNRJWBLOh2x3MfZnGWZ2zwS3/bLyNkGfArDsO5x/S3lsFpbsza5OtjhSqSq3J9fqnV6XSyhPeHq5T2LNloBX+PYPeakvCVxaGr/osXtrKl2SE5FWXZcltho6FNa/V6vSyPx6MScYw3VroeBJjEnPKE1byogEuRgf/CbatF+9ZN3N/kVG4cuOHfxV9P5/+GJHuprYmNFC+YxRuu7AwG95WYNVe3v1wT+wqssAdFkvHOTFcY0rxrrvdvKX6WSc4HtKgrfdGjAHdPqJq/RZbFEex+rSxiFT8l+NaxTaabERAGGmrZd4uWMpmF0InelBUF9wn9UXcgzdkMlCJtKNAse6Odu0JZEcS4FwEUdfLWSfN8b+U8NUdpnk9Toa9OFMw4/mewWH8Bk4PTGjryAFcAAAAASUVORK5CYII=" alt="">表情与文字放在一起的样子</p>
    <p>如果是默认的基线对齐,明显偏上了</p>
    <br />
    <br />
    <p style="font-size: 14px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAIAAABL1vtsAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAQCSURBVDhPrVF7TFNXHO4fc5FsQRYN0w5h7hHUbXGbY1LZCIbgBGHAIMzHNEPnRDcDZnMq4EAxPDYYWDPtFAq2GCoGa5nYYkF5CMoqpbS0llqgW4HespbHoOvrnnP3u3CzkLHx1758OTn3O9/33d+5l7UQDnW0vT3Q0uhDyP2IpucIuS/sQQGdcSwCh/Yja/Nyz6+5eEqEXa3YPUi5VZSzBU0Jke0Hp2EXnDo0cYx7IeBVUIEmJXisGBGn8Xg5NVVHTf8MK7bzsOUUJr5F1rMzqvfByWTmA9RpTQI5XotMqWCl8zO3Kdcvs1N0QhG2X8SWTDhF1qI/usP+2TKl3g8qGuOioT3IfBgTZ/CEgHI0Ux4t5TXSLY47UAqDIPMh2kMUgB9STB4wWOeDR7KQIW624hAmcvFEFcQoVw/dArPMNOLJaminCR5wmo9AisnbFLH2rvfQUJq3P153LUYliB2UpkzqS5lBnC2Q91j5oDyRJCurYk3SePQkAekifm99CbJ0xVD9CmQ6CJJRHGXrTETGZJowy4SA5mT13AhwOzSwAzgijwGC36XZClm6Ql/zNDmcg/rCvI+jkTHJ0pnYJ46wKD6hrz2aia1nIUyOnh64l9J3M9L+KAk8pD4a6cLJwf2QpSsUPz2DzUe96s32B+HCvQFXU1+sy3idXtNfpVvMR8ZVn5Z/yK49vBb0y3HPi9KCPNpIUrMZmY9Blq5oK13iGUgdfxhy8vK5283fwQE04uHjeOQEfSP4i6bPMJGPR7NB8ZpPlV0v51/7elqxEfaQpSvulSzpb0/aK+z4QDndLtsBb0D92xnOfZd5dGkiJXcFUR1TX/zII9RfQpau4OZv+1g8VDJM7uv58/vU9ZUH2Isz7+SBM3bym153Aq+rpiCIJElWVKnqRIfn4mO8q2HsQlpYW3W+vqPeYlTZftNTs/C6nfAI7JVXN5xLP7pzS2av87wWH7zjSMytdLlcrOMNRJWBLOh2x3MfZnGWZ2zwS3/bLyNkGfArDsO5x/S3lsFpbsza5OtjhSqSq3J9fqnV6XSyhPeHq5T2LNloBX+PYPeakvCVxaGr/osXtrKl2SE5FWXZcltho6FNa/V6vSyPx6MScYw3VroeBJjEnPKE1byogEuRgf/CbatF+9ZN3N/kVG4cuOHfxV9P5/+GJHuprYmNFC+YxRuu7AwG95WYNVe3v1wT+wqssAdFkvHOTFcY0rxrrvdvKX6WSc4HtKgrfdGjAHdPqJq/RZbFEex+rSxiFT8l+NaxTaabERAGGmrZd4uWMpmF0InelBUF9wn9UXcgzdkMlCJtKNAse6Odu0JZEcS4FwEUdfLWSfN8b+U8NUdpnk9Toa9OFMw4/mewWH8Bk4PTGjryAFcAAAAASUVORK5CYII=" alt="" style="vertical-align: bottom;">表情与文字放在一起的样子</p>
    <p>如果是底部对齐,发现感觉不错</p>
    <br />
    <br />
    <p style="font-size: 14px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAIAAABL1vtsAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAQCSURBVDhPrVF7TFNXHO4fc5FsQRYN0w5h7hHUbXGbY1LZCIbgBGHAIMzHNEPnRDcDZnMq4EAxPDYYWDPtFAq2GCoGa5nYYkF5CMoqpbS0llqgW4HespbHoOvrnnP3u3CzkLHx1758OTn3O9/33d+5l7UQDnW0vT3Q0uhDyP2IpucIuS/sQQGdcSwCh/Yja/Nyz6+5eEqEXa3YPUi5VZSzBU0Jke0Hp2EXnDo0cYx7IeBVUIEmJXisGBGn8Xg5NVVHTf8MK7bzsOUUJr5F1rMzqvfByWTmA9RpTQI5XotMqWCl8zO3Kdcvs1N0QhG2X8SWTDhF1qI/usP+2TKl3g8qGuOioT3IfBgTZ/CEgHI0Ux4t5TXSLY47UAqDIPMh2kMUgB9STB4wWOeDR7KQIW624hAmcvFEFcQoVw/dArPMNOLJaminCR5wmo9AisnbFLH2rvfQUJq3P153LUYliB2UpkzqS5lBnC2Q91j5oDyRJCurYk3SePQkAekifm99CbJ0xVD9CmQ6CJJRHGXrTETGZJowy4SA5mT13AhwOzSwAzgijwGC36XZClm6Ql/zNDmcg/rCvI+jkTHJ0pnYJ46wKD6hrz2aia1nIUyOnh64l9J3M9L+KAk8pD4a6cLJwf2QpSsUPz2DzUe96s32B+HCvQFXU1+sy3idXtNfpVvMR8ZVn5Z/yK49vBb0y3HPi9KCPNpIUrMZmY9Blq5oK13iGUgdfxhy8vK5283fwQE04uHjeOQEfSP4i6bPMJGPR7NB8ZpPlV0v51/7elqxEfaQpSvulSzpb0/aK+z4QDndLtsBb0D92xnOfZd5dGkiJXcFUR1TX/zII9RfQpau4OZv+1g8VDJM7uv58/vU9ZUH2Isz7+SBM3bym153Aq+rpiCIJElWVKnqRIfn4mO8q2HsQlpYW3W+vqPeYlTZftNTs/C6nfAI7JVXN5xLP7pzS2av87wWH7zjSMytdLlcrOMNRJWBLOh2x3MfZnGWZ2zwS3/bLyNkGfArDsO5x/S3lsFpbsza5OtjhSqSq3J9fqnV6XSyhPeHq5T2LNloBX+PYPeakvCVxaGr/osXtrKl2SE5FWXZcltho6FNa/V6vSyPx6MScYw3VroeBJjEnPKE1byogEuRgf/CbatF+9ZN3N/kVG4cuOHfxV9P5/+GJHuprYmNFC+YxRuu7AwG95WYNVe3v1wT+wqssAdFkvHOTFcY0rxrrvdvKX6WSc4HtKgrfdGjAHdPqJq/RZbFEex+rSxiFT8l+NaxTaabERAGGmrZd4uWMpmF0InelBUF9wn9UXcgzdkMlCJtKNAse6Odu0JZEcS4FwEUdfLWSfN8b+U8NUdpnk9Toa9OFMw4/mewWH8Bk4PTGjryAFcAAAAASUVORK5CYII=" alt="" style="vertical-align: bottom;">表情与文字放在一起的样子<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAABXCAIAAABURUrCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADXSURBVHhe7dExDQAwDMCwAelZ/szKYTRyWDIDv5slS0+anjQ9aXrS9KTpSdOTpidNT5qeND1petL0pOlJ05OmJ01Pmp40PWl60vSk6UnTk6YnTU+anjQ9aXrS9KTpSdOTpidNT5qeND1petL0pOlJ05OmJ01Pmp40PWl60vSk6UnTk6YnTU+anjQ9aXrS9KTpSdOTpidNT5qeND1petL0pOlJ05OmJ01Pmp40PWl60vSk6UnTk6YnTU+anjQ9aXrS9KTpSdOTpidNT5qeND1petL0pOkJm/21lSeot+fxjgAAAABJRU5ErkJggg==" alt="" style="vertical-align: top"></p>
    <p>但是底部对齐的话,会受到同一个inline-box内其他元素的影响</p>
    <br />
    <br />
    <p style="font-size: 14px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAIAAABL1vtsAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAQCSURBVDhPrVF7TFNXHO4fc5FsQRYN0w5h7hHUbXGbY1LZCIbgBGHAIMzHNEPnRDcDZnMq4EAxPDYYWDPtFAq2GCoGa5nYYkF5CMoqpbS0llqgW4HespbHoOvrnnP3u3CzkLHx1758OTn3O9/33d+5l7UQDnW0vT3Q0uhDyP2IpucIuS/sQQGdcSwCh/Yja/Nyz6+5eEqEXa3YPUi5VZSzBU0Jke0Hp2EXnDo0cYx7IeBVUIEmJXisGBGn8Xg5NVVHTf8MK7bzsOUUJr5F1rMzqvfByWTmA9RpTQI5XotMqWCl8zO3Kdcvs1N0QhG2X8SWTDhF1qI/usP+2TKl3g8qGuOioT3IfBgTZ/CEgHI0Ux4t5TXSLY47UAqDIPMh2kMUgB9STB4wWOeDR7KQIW624hAmcvFEFcQoVw/dArPMNOLJaminCR5wmo9AisnbFLH2rvfQUJq3P153LUYliB2UpkzqS5lBnC2Q91j5oDyRJCurYk3SePQkAekifm99CbJ0xVD9CmQ6CJJRHGXrTETGZJowy4SA5mT13AhwOzSwAzgijwGC36XZClm6Ql/zNDmcg/rCvI+jkTHJ0pnYJ46wKD6hrz2aia1nIUyOnh64l9J3M9L+KAk8pD4a6cLJwf2QpSsUPz2DzUe96s32B+HCvQFXU1+sy3idXtNfpVvMR8ZVn5Z/yK49vBb0y3HPi9KCPNpIUrMZmY9Blq5oK13iGUgdfxhy8vK5283fwQE04uHjeOQEfSP4i6bPMJGPR7NB8ZpPlV0v51/7elqxEfaQpSvulSzpb0/aK+z4QDndLtsBb0D92xnOfZd5dGkiJXcFUR1TX/zII9RfQpau4OZv+1g8VDJM7uv58/vU9ZUH2Isz7+SBM3bym153Aq+rpiCIJElWVKnqRIfn4mO8q2HsQlpYW3W+vqPeYlTZftNTs/C6nfAI7JVXN5xLP7pzS2av87wWH7zjSMytdLlcrOMNRJWBLOh2x3MfZnGWZ2zwS3/bLyNkGfArDsO5x/S3lsFpbsza5OtjhSqSq3J9fqnV6XSyhPeHq5T2LNloBX+PYPeakvCVxaGr/osXtrKl2SE5FWXZcltho6FNa/V6vSyPx6MScYw3VroeBJjEnPKE1byogEuRgf/CbatF+9ZN3N/kVG4cuOHfxV9P5/+GJHuprYmNFC+YxRuu7AwG95WYNVe3v1wT+wqssAdFkvHOTFcY0rxrrvdvKX6WSc4HtKgrfdGjAHdPqJq/RZbFEex+rSxiFT8l+NaxTaabERAGGmrZd4uWMpmF0InelBUF9wn9UXcgzdkMlCJtKNAse6Odu0JZEcS4FwEUdfLWSfN8b+U8NUdpnk9Toa9OFMw4/mewWH8Bk4PTGjryAFcAAAAASUVORK5CYII=" alt="" style="vertical-align: text-bottom;">表情与文字放在一起的样子<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAABXCAIAAABURUrCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADXSURBVHhe7dExDQAwDMCwAelZ/szKYTRyWDIDv5slS0+anjQ9aXrS9KTpSdOTpidNT5qeND1petL0pOlJ05OmJ01Pmp40PWl60vSk6UnTk6YnTU+anjQ9aXrS9KTpSdOTpidNT5qeND1petL0pOlJ05OmJ01Pmp40PWl60vSk6UnTk6YnTU+anjQ9aXrS9KTpSdOTpidNT5qeND1petL0pOlJ05OmJ01Pmp40PWl60vSk6UnTk6YnTU+anjQ9aXrS9KTpSdOTpidNT5qeND1petL0pOkJm/21lSeot+fxjgAAAABJRU5ErkJggg==" alt="" style="vertical-align: top"></p>
    <p>如果是text-bottom,是不错的, 也不会受到影响</p>
    <br />
    <br />
    <p style="font-size: 14px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAIAAABL1vtsAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAQCSURBVDhPrVF7TFNXHO4fc5FsQRYN0w5h7hHUbXGbY1LZCIbgBGHAIMzHNEPnRDcDZnMq4EAxPDYYWDPtFAq2GCoGa5nYYkF5CMoqpbS0llqgW4HespbHoOvrnnP3u3CzkLHx1758OTn3O9/33d+5l7UQDnW0vT3Q0uhDyP2IpucIuS/sQQGdcSwCh/Yja/Nyz6+5eEqEXa3YPUi5VZSzBU0Jke0Hp2EXnDo0cYx7IeBVUIEmJXisGBGn8Xg5NVVHTf8MK7bzsOUUJr5F1rMzqvfByWTmA9RpTQI5XotMqWCl8zO3Kdcvs1N0QhG2X8SWTDhF1qI/usP+2TKl3g8qGuOioT3IfBgTZ/CEgHI0Ux4t5TXSLY47UAqDIPMh2kMUgB9STB4wWOeDR7KQIW624hAmcvFEFcQoVw/dArPMNOLJaminCR5wmo9AisnbFLH2rvfQUJq3P153LUYliB2UpkzqS5lBnC2Q91j5oDyRJCurYk3SePQkAekifm99CbJ0xVD9CmQ6CJJRHGXrTETGZJowy4SA5mT13AhwOzSwAzgijwGC36XZClm6Ql/zNDmcg/rCvI+jkTHJ0pnYJ46wKD6hrz2aia1nIUyOnh64l9J3M9L+KAk8pD4a6cLJwf2QpSsUPz2DzUe96s32B+HCvQFXU1+sy3idXtNfpVvMR8ZVn5Z/yK49vBb0y3HPi9KCPNpIUrMZmY9Blq5oK13iGUgdfxhy8vK5283fwQE04uHjeOQEfSP4i6bPMJGPR7NB8ZpPlV0v51/7elqxEfaQpSvulSzpb0/aK+z4QDndLtsBb0D92xnOfZd5dGkiJXcFUR1TX/zII9RfQpau4OZv+1g8VDJM7uv58/vU9ZUH2Isz7+SBM3bym153Aq+rpiCIJElWVKnqRIfn4mO8q2HsQlpYW3W+vqPeYlTZftNTs/C6nfAI7JVXN5xLP7pzS2av87wWH7zjSMytdLlcrOMNRJWBLOh2x3MfZnGWZ2zwS3/bLyNkGfArDsO5x/S3lsFpbsza5OtjhSqSq3J9fqnV6XSyhPeHq5T2LNloBX+PYPeakvCVxaGr/osXtrKl2SE5FWXZcltho6FNa/V6vSyPx6MScYw3VroeBJjEnPKE1byogEuRgf/CbatF+9ZN3N/kVG4cuOHfxV9P5/+GJHuprYmNFC+YxRuu7AwG95WYNVe3v1wT+wqssAdFkvHOTFcY0rxrrvdvKX6WSc4HtKgrfdGjAHdPqJq/RZbFEex+rSxiFT8l+NaxTaabERAGGmrZd4uWMpmF0InelBUF9wn9UXcgzdkMlCJtKNAse6Odu0JZEcS4FwEUdfLWSfN8b+U8NUdpnk9Toa9OFMw4/mewWH8Bk4PTGjryAFcAAAAASUVORK5CYII=" alt="" style="vertical-align: -5px;">表情与文字放在一起的样子</p>
    <p>如果是整数值的话,发现也感觉不错,可以根据文字调节</p>
    <br />
    <br />
    <script type="text/javascript">
    </script>
</body>
</html>
展开阅读全文

没有更多推荐了,返回首页