为什么vertical-align不起作用

时间:2025-02-01 09:33:20

先看一段代码

<style>
.title { margin:50px; color:blue; }
.title span { font-size:24px; }
.title span.en { font-size:14px; vertical-align:top; }
</style>
<div class="title">
<span>博客园</span>
<span class="en">/cnblogs</span>
</div>

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAANAAAAA6CAIAAABOGUDHAAAD5klEQVR4nO2bXZqrIAyGWRcLYj1ZTTbDYnIuEOUfbDWOPd/79GJmbJHKawLBMQKAIubpDoD/CwgHVIFwQBUIB1SBcEAVCAdUgXBAFQgHVIFwQBUIB1SBcEAVCAdUgXBAFQgHVIFwQBUIB1SBcEAVCAdUgXBAFQgHVIFwQBUIB1TREs4L+88/6+jKvoAHuVI4Z8S42VEv1ogxwmda9iRm2HjzdO7cOcQasTD7Zi4WzrmuSc4IxSDHToyVUyEvOLeukDNizr/OOQrOc7Vw/QFLhRMRZmHXCFqesrdlLXQiXNHySmcaeLGtdsC13CLclgHHscSJYxEusxjZ7keYRw1ypzM92OUhDcKp8FiEaxJMTd8W/jJolmy0PG887UxT4nCUKWb2FeH49ExAepflo6Z+gBuEiwvS+SyqSJFhPZEPgzNirFA1YEQi4/x7Q0pl98mqAsKlXCBcM36QL0Na/evUh5D1eq/x2K8Lt4XGBeFWgvRqTyDc96RX1n8vHG8zM6LG3x2XOXTQmQHhbgmBeSJcrkh2m7l4RtqKPunEIPRkj/dbr5LW0lSQdvk4hRUbD6U34RvX1DfO4aYpdXS5/HGJhZPky6sXuhjm3itowU54JpynI6aSTbrkxUbhdoc8lT4d3yWcJQrnklCdln6yU8R77/hB3loPv1e4DyNcaluAj1Xq4m1dRrjUp7p9mUe4fXWSjXrvjElrRU/IiqVNOKYysR5H01PEX331/tfxpHDt0fVim9f0jG11Z74VLvlIb9QXhduqjyzGClWVyHC0PMXuX9ynea92T6bU5uiSa1zKMJvh+MPKzL0ULk9GZ4XzdJjxpHB7BxaWTX+TJyIci21Z1YarK5uUfwfxruhMNoSFcF5otmg48qlckFJDxdtY8dVaNaTUsXCNb/QebhPO969F4lC5Aq3e1t2wr3cdqgJeY+YU+3ZOuCoiZjP6uOc2EK6xLJgtGurCNed1x+bG4N/neuHGxbOVctpgd6tOyuUOVd6Zjcowm0/JLY2ES/Nps5PhK4yES958LFfHZRGfVFhSTTs32Fu4MaV262TFjIS3C7cPYRinccoIEgxKcUWEqBcQu0NbKY66wrF7uuL1Q1XiO4XrbYN25kAFK8KtdKatS56Rx4XfzzYYvoTscYmy+cDLuXnzvlnLUBSujG2j8/2tp0XqnYzf4PanRRpDrijcePsrb/FvCfer6D2etD8MQmuP+84fqhs2Embidnn9MSgNggu5WLj5gNV1tQ7zCDcT7oPHk164G/4y8G+CQBUIB1SBcEAVCAdUgXBAFQgHVIFwQBUIB1SBcEAVCAdUgXBAFQgHVIFwQJV/EhJ/pxWA0/sAAAAASUVORK5CYII=" alt="" />

结果如图,为什么我写了vertical-align:top;但是文字却没有对齐呢?

其实是因为vertical-align这个属性要和line-height搭配使用,因为vertical-align的对齐方式,是把元素的顶端行中最高元素的顶端对齐,如图。

aaarticlea/png;base64,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" alt="" />

只要我元素的行高和文字大小一样,vertical-align就可以实现想要的效果了。

.title span.en { font-size:14px; line-height:14px; vertical-align:top; }

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKQAAAAqCAIAAACybWe+AAADgElEQVR4nO2a27XsIAiGrcuCqIdqaMZiOA9q4hU1tzlry7/mYc8kg8RPEJxtWLWNzK8dUH0nhb2RFPZGUtgbSWFvJIW9kRT2RlLYG0lhbySFvZEU9kZ6DrZjcte/C/iYI6qe1mCDYQOjq46tYWOYViw7ZCMabw4Ha2OwNWw3XlXLsAG6FMEwxuAmYGN5KdQ973l8YNisvwbrg5bd5t6yu2TqVa3D7k9WCpuZiZigEawOs9syC53ILizPONOQY9uyk4rgSuj/cdgh68oxBAzETOX0oe1+hUgySB1neiLIQ3kCdnNVDfXHYfeuDmfKr5L0Nv+JYBZtXGG58dSZ5gLyVwnjjA9h53gymxBHxFCRpE/hPYF83NQadJbsOYRlGy/5NTq16SzqEuxYeI93zSIt+9otX+9g2FjG6qkQmeWc/3Qad3gmIbSJ845thH0477BkGXyhuA4ibEiqwrQuyYag+Dklpp5uUqZgN+MGXRnK9dshi3QV1y95+5yHHVLCCPaRQrIZ742YWCs8QcsWA2zCcnGfV9Mh4ltX3f+grqdxdx92fELExudAZd4WnBHkV6pPSBJsdybS3oxPwg5lKbGxjFWJ6q+WQxzsY+P6BvJbe/YwjUssksllKhPaDMVip+y9PA8CJhG2w9OHX8I+HJjIbau6C/tiZKekveisxieTcxnZKcvaPg8i+8zh/EAa922IseyqmtyncRl2GOHplP4u7PbMOrbNZ1ghXTtzC3Z1f1Y9xQMAAXajBBsVaHU3QXlB2jyluKN303hzZhEapI+n9X/MNLsl7LyOXYKd5vDCpTSdSrCTm8+9SW69XNLFpUvkuPnpbfudyCa2LaJtUbU5UWtqRs5kSa+A7RjFAo3g4Y52WZ+cwNyA7frOJfzKSru6rZup6tO0qkFvNDzRtyXY1w7Obgrt6WHm/Gu6AltujmfaZeHEtN4IylPP3Jmgiq7Nu1iLU8elX6o+oXtbt9J4tw8uGgkKEXk8np9xudr0+6jQahcFTl2sHTMYWm38v2B/r3uwe8fandal0AzsGWfaO26+C4wPVTbQ7R9Cmv3Sh7DLmJbGU9grap5QNqb7Q9jykWpuUWGvaHAcHX/Uwrl/Uxn/KC4a8c2rna71hNZ/Ey3DHk9W3Td3NI7sEewLP3H+tp3+rfRfiTeSwt5ICnsjKeyNpLA3ksLeSAp7IynsjfQPROoQyzrpa6AAAAAASUVORK5CYII=" alt="" />

还有一种解决方法,就是直接将文字写到父元素中,这样子元素span会自动对齐父元素的上下边,因为行中参照物就是父元素本身。

<style>
.title { margin:50px; font-size:24px; color:blue; }
.title span.en { font-size:14px; vertical-align:top; }
</style>
<div class="title">
博客园
<span class="en">/cnblogs</span>
</div>