先看一段代码

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

为什么vertical-align不起作用的更多相关文章

  1. What is Vertical Align?

    https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...

  2. 关于Vertical Align的理解

    1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...

  3. 浏览器兼容CSS代码:按钮文字垂直居中(input button text vertical align)

    经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...

  4. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  5. 快速学习html、css的经典笔记

    HTML语言剖析 Html简介-目录 全写: HyperText Mark-up Language  译名: 超文本标识语言  简释:一种为普通文件中某些字句加上标示的语言,其目的在于运用标签(tag ...

  6. Highcharts图形报表的简单使用

    Highcharts是一个纯JavaScript框架,与MSChart完全不一样,可以在网页中使用,所以php.asp.net.jsp等等页面中都可以使用.Highcharts官网:http://ww ...

  7. 对CSS居中的一点总结

    在学习前端的过程中,发现元素和文本的水平居中和垂直居中,是经常会出现的问题,在实际工作中也会经常碰到.居中的技巧有很多,但在编写代码的过程中,发现有时候技巧管用,有时候不管用,于是就将每个知道的方案都 ...

  8. CSS 居中效果完整指南

    本文翻译自:<Centering in CSS: A Complete Guide> 使用 CSS 实现效果困难吗?显然不是.实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法 ...

  9. python CSS

    CSS 一. css的四种引入方式   1.行内式  2.嵌入式  3. 链接式 将一个.css文件引入到HTML文件中 1 <link href="mystyle.css" ...

  10. cocos 常用组件

    前面的话 本文将详细介绍 cocos 中的常用组件 Sprite [概述] Sprite(精灵)是 2D 游戏中最常见的显示图像的方式,在节点上添加 Sprite 组件,就可以在场景中显示项目资源中的 ...

随机推荐

  1. S7-200和S7-300profibus-DP通信

    一.S7-200CN的cup可以通过EM277接入DP网络 二.CPU315-2DP做主站,S7-200CUP做从站 三. 通信题目 四.硬件组态 1.主站的DP组态,地址为2 2.EM277作为从站 ...

  2. window下mysql数据备份

    今天我有个朋友让我帮他在windowServer服务器上备份一下mysql的数据库,于是花了一天的时间完成了一个每天定时备份数据库的功能,小编在这里为大家记录一下: 首先对于mysql命令行的导入导出 ...

  3. 学习Object.assign()

    Object.assign()用于将所有可枚举的值从一个或多个源对象复制到目标对象.它将返回目标对象. 语法 Object.assign(target, ...source); var obj = { ...

  4. ActiveMQ (二) 常用配置简介

    ActiveMQ的主要配置文件 ActiveMQ的一些常用的属性很多可以在对应的配置文件中进行配置的.比如访问web console的管理端的端口,用户名密码,连接MQ时的用户名和密码,持久化设置,是 ...

  5. umask的作用[转]

    umask的作用 umask 命令允许你设定文件创建时的缺省模式,对应每一类用户(文件属主.同组用户.其他用户)存在一个相应的umask值中的数字.对于文件来说,这一数字的最 大值分别是6.系统不允许 ...

  6. SpringMVC 控制器默认支持GET和POST两种方式

    在SpringMVC的controller中,@RequestMapping只写路径,不包含RequetMethod.GET和RequetMethod.POST,HttpServletRequest的 ...

  7. vue2.0 如何在hash模式下实现微信分享

    最近又把vue的demo拿出来整理下,正好要做"微信分享"功能,于是遇到新的问题: 由于hash模式下,带有"#",导致微信分享的签证无效:当改成history ...

  8. 北斗时钟同步系统-GPS卫星授时设备-NTP网络校时服务器

    北斗时钟同步系统-GPS卫星授时设备-NTP网络校时服务器 北斗时钟同步系统-GPS卫星授时设备-NTP网络校时服务器 北斗时钟同步系统-GPS卫星授时设备-NTP网络校时服务器 论述当下网络时间同步 ...

  9. 代码审计之XiaoCms(后台任意文件上传至getshell,任意目录删除,会话固定漏洞)

    0x00 前言 这段时间就一直在搞代码审计了.针对自己的审计方法做一下总结,记录一下步骤. 审计没他,基础要牢,思路要清晰,姿势要多且正. 下面是自己审计的步骤,正在逐步调整,寻求效率最高. 0x01 ...

  10. AFN中请求序列化的设置

    最近遇到一个需求:要求从客户端传到服务器的参数是json字符串,于是我本能的用pod装了afn然后进行了request和response Serialization的相关设置 AFHTTPSessio ...