深入理解 vertical-align

最新推荐文章于 2024-05-15 13:55:28 发布

yuanhaitaozz

最新推荐文章于 2024-05-15 13:55:28 发布

阅读量6.4k

点赞数 2

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/u012062760/article/details/52999416

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

关于vertical-align属性的值

inherit：继承
线类：可选baseline （默认属性值），top，middle，bottom
文本类： text-top，text-bottom （文本上下边缘）
上标下标类： sub，super
数值百分比类： 20px，2em，20% …（支持负值）

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

数值的含义：在baseline对齐基础上上下偏移对应的数值大小，比如值为1px就是在默认（baseline）基础上上移1像素，1em就是上移一个字体大小。
然而对于百分比来说，它是相对于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

本次问题

行高会改变基线的位置吗？

相关代码

<!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>

yuanhaitaozz

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
深入理解 vertical-align

关于vertical-align属性的值inherit：继承线类：可选baseline （默认属性值），top，middle，bottom文本类： text-top，text-bottom （文本上下边缘）上标下标类： sub，super数值百分比类： 20px，2em，20% …（支持负值）vertical-align的数值百分比类型的值数值的含义：在baseline对齐基础上上
复制链接

扫一扫