为什么vertical-align不起作用
先看一段代码
<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,iVBORw0KGgoAAAANSUhEUgAAAOEAAABUCAIAAAD71sfrAAAIMUlEQVR4nO2cT2sbRxTA93P0azQhYZuAL8klMYndNDSxaeoSFvuQYNyDQZjIl4JjQ1iikoNCQgnVQcFXTXwpzsWHgtOmYJfCUkxF8wmWnF8PTzuanZnd1a402qfm/ZiDNLsePfx+fvNnhT1g3ODtHNcdQiaUYzPx6g7gfwtlDyjHZsKOuoKyB5RjM2FHGeqwowx12FGGOuyoKyiv+SjHZsKOuoKyB5RjM2FHXUHZA8qxmbCjrqDsAeXYTNhRV1D2gHJsJuwoQx12lKEOO8pQhx11xec//Vl3CJlQjs2EHdU5fvf+1t2V85eucCtsXy19d/zbe9cZYUd1bt7+pvbcz1Bb/Ppb1xlhR3Vqz/rMNdcZYUd1ak/5zDXXGWFHdWpP+cw11xlhR3VqT3lOu7uyVnsM7Gj91J5ydlSDHdWpPeXsqAY7qlN7ytlRDXZUp/aUV3D03V//yoY9K2sb+DZsdyp8UNjuvO69xdeb27vq+CtrG+xozdQuYjVHry0uaZLhi9e9t6ZVOe3a4hKaLR3VPsjsdJ0RdlTHzMHB+ulZE86aENxonL90BV9gT/POM7wH35414fn9nuwxb5Pt4vLG3H5/br9/uXWIPXP7fdnpP3g8pqOqrJvbu2rPytqGNHhze1e7Ku8xHVV/kB2tEy0BwY2G1E7Kp4moXZ2/ek+9bf7qvbNmatgL15ekmv6Dx2jk3H7/i+bPeHVuv1/WUWymcFZ9N7d30d2slYDV0ayS7Doj7KiOlgA07GD9VLVQvn5+vydrpFlu5W0H66corvQS6yU2VFP18nLr8MJ1S10s3DNpRppFVNM0axzTUVwDWG92nRF2VMeaBpy1TfnQUbyKFh6sn47iKHqptok4GrY7stSF7U6WhRXqaM7NrjPCjuqYduKL5p1nWDKlrFhi56/ea955pk7rhY7ibI4WXlzewBeVHb22uIReYqnDOpqzVaq2Hn3de5u15HWdEXZUx8yB3A/Jt8/v99RpXd5zsH6aU0dxS3Q+KaXqRD9mHQ3bHfVgqPC0KKeh6LKhzdblKTtaG4VZ1DZA02x8hs8AsKPsKH3YUXaUOrWnnB3VYEd1ak/5zDXXGWFHdWpP+cw11xlhR3VqT/nMNdcZYUd1ak/5zDXXGWFHdeZvLdee9RlqN29/4zoj7KjO8bv381/aH/px09r8rWX+PyUzzDj/U6n94tUoirRfvJp+bNOHHSVKoaaVBZ052FG65Gj66QgK7ChxrJp+UoLCDDgagYiq/2wQTjKWUkzqf85rmk5E0Bn7f/hquN7Osdqo9fseeB6IMuNEIXheuc8NSt4Pkb1f6/R2jnu//o2tVP8vv/9z7uETFPTcwyef/fhHtXHMfmr5zeonUUcDD4IARPbVMCmlIgDPh1KFFTXNGtz6cV75Fhgf4O0cv+nHE2mHHz4+evry0dOXhx8+TmRAb7bqaN0BAKCj2RKpjgKAECAC8AL9tihM3ZYawbjZOvIowViIwLeNM0FHUdNJCcqOVkFqMZia8ytWAIEAEOCn15qhn/kjQuQNKDKCyUIE6cI5FUcn29jR0pSqo1ZQbvU27MkZNvSTP4z04GowVu/xqgiTJUeGowAw1OIoXmjF3ZImNbbixpHRX2kosxX8QilBydFkC1+8ItTm7gh8T1+nBh54PoSGo2EIkL8wmNBcD4qj7U68KkprxI4idTpqrVJhpBdO822hQjgdZzU/90BqdEcHBXgERxtb8d4JO1oRSnUUAACi8R0Vg1VmGFr6A6FP7jnB5IB/YFj+C9ajaav2WvHCVtI6iYsiXk06pc3oaCPpH/iqjCYvLWzFbcW/4Ue04tXkUrszvJnXo6XRtCic6/MUisCXNwhlVZAIOmIwhTGglCIAUeRoVwwn+r3WwMs3/fjNSbyaOCq16wpdwbYUHfVNHG1sDYftiuGdqY84SvqPlKFO2NHymI5WrKOqoIgY7utHnMH1OqoqaI4PxXV0r6WUwHTBs8zpJ/FqUkq1uX6vFa+KgaNtoc/4w6vqRyRvu+n72dHSlHXUvt2JwLce75cR1AxmXEdPhrNt1xCrlKPtTrzQGTi611GKpXJV/wip7EmylmjFXXa0AmXnequjYWARFFeNInlReIZlBiNXtwBVHO2KoUx1OqosCXg9WoVR66gA3yaiHWFs4cVIK1otmChUTrU0RyMIs/dMAJCa6Ccx1zeOkvWosbvHuT7fUfVPpfIXdaYPPUejbAsV7fQ9u3Gb+bA0dVVtxsGq6mjoK6KXdVSZ6C17pn7c6BQ4atkVFe2Z1NFwg4/rUXlcgBU3+9dHDkKO5h9qjnLMmfM41Fwt6I8008EMMKRMvcXnsdmOqhO95WAokSzP0ZZxulR49nSiHGOJ1L5+QVmSjp206UHIUUnm+aW6NASIxKD+STVRlNTsbBCF4AV5R6Tas1Bz/yQr9OCINMxcj7Y7tkP4abaMA39ej5bGsgS07sTTjmYxiqOjBCOCzBhSz+6z90zVHi+N2fZaw5o6OJCadUcJfqcVIFFB608cHfc7s0He/dS+41y2/4fv+TvODrA+ftTnWZhqHc1/XpoeMbOOjjzEtKEcmwldR4ckX2sKR/sSfvGXUHMHwdNZf+TtV9aRLWUPKMdmQsXR4tN187wzg+I6WuRohe/mlfoJphQkHGWYHNhRhjrsqCsor/kox2bCjrqCsgeUYzNhR11B2QPKsZmwo66g7AHl2EzYUVdQ9oBybCbsKEMddpShDjvKUIcddQXlNR/l2EzYUVdQ9oBybCbsqCsoe0A5NhN21BWUPaAcmwk76grKHlCOzYQdZajzH4NVmQAN1tHAAAAAAElFTkSuQmCC" 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>
为什么vertical-align不起作用的更多相关文章
- What is Vertical Align?
https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...
- 关于Vertical Align的理解
1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...
- 浏览器兼容CSS代码:按钮文字垂直居中(input button text vertical align)
经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...
- 前端知识点回顾之重点篇——CSS中vertical align属性
来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...
- 快速学习html、css的经典笔记
HTML语言剖析 Html简介-目录 全写: HyperText Mark-up Language 译名: 超文本标识语言 简释:一种为普通文件中某些字句加上标示的语言,其目的在于运用标签(tag ...
- Highcharts图形报表的简单使用
Highcharts是一个纯JavaScript框架,与MSChart完全不一样,可以在网页中使用,所以php.asp.net.jsp等等页面中都可以使用.Highcharts官网:http://ww ...
- 对CSS居中的一点总结
在学习前端的过程中,发现元素和文本的水平居中和垂直居中,是经常会出现的问题,在实际工作中也会经常碰到.居中的技巧有很多,但在编写代码的过程中,发现有时候技巧管用,有时候不管用,于是就将每个知道的方案都 ...
- CSS 居中效果完整指南
本文翻译自:<Centering in CSS: A Complete Guide> 使用 CSS 实现效果困难吗?显然不是.实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法 ...
- python CSS
CSS 一. css的四种引入方式 1.行内式 2.嵌入式 3. 链接式 将一个.css文件引入到HTML文件中 1 <link href="mystyle.css" ...
- cocos 常用组件
前面的话 本文将详细介绍 cocos 中的常用组件 Sprite [概述] Sprite(精灵)是 2D 游戏中最常见的显示图像的方式,在节点上添加 Sprite 组件,就可以在场景中显示项目资源中的 ...
随机推荐
- 606. Construct String from Binary Tree
You need to construct a string consists of parenthesis and integers from a binary tree with the preo ...
- 控制input 输入框的placeholder
/*webkit placeholder居右*/ ::-webkit-input-placeholder { color: #e7e7e7; text-indent: .3rem; font-size ...
- 第六节 etc/passwd 、etc/shadow 、 useradd 、 groupadd
调优方法原理:禁用atime的修改来节省cpu和内存资源.命令:mount noatime disk 1.配置文件1. /etc/passwd文档结构:由":" 分隔成7个字段&q ...
- unity -- Time类(持续更新中)
2018年了,新年总是会制定很多具体目标和计划,不管能否坚持去完成,初衷和决心总是要有的.本年第一篇博客终于开始下笔了,先立一些今年和公司业务无关的的flag: 1.希望每月或两月能看一套蛮牛游戏上的 ...
- 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV
点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...
- Git详解之三:Git分支
Git 分支 几乎每一种版本控制系统都以某种形式支持分支.使用分支意味着你可以从开发主线上分离开来,然后在不影响主线的同时继续工作.在很多版本控制系统中,这是个昂贵的过程,常常需要创建一个源代码目录的 ...
- Tengine 安装配置全过程(nginx 同理)
1.安装必要的编译环境好 yum update yum install gcc gcc-c++ autoconf automake 2.安装需要的组件 A.PCRE PCRE(Perl Compati ...
- 最新swift4.0 图片进行尺寸大小及体积压缩
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Menlo; color: #4dbf56; background-color: #282b3 ...
- JS 对象API之判断自有属性、共有属性
自有属性:对象实例私有的属性,只有该对象实例可用 共有属性:对象实例共有的属性,所有对象实例都可用 要判断对象实例的自有属性.共有属性:首先看看JS给我们提供的两个方法: 1.判断是否是对象实例的属性 ...
- timeline自适应时间轴
近期项目一直有类似QQ空间那样的时间轴,来展示公司新闻动态,或者流程之类的设计UI. 每每出现,不以为然,这次总结了下,精简下 ================= ================== ...