为什么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,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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不起作用的更多相关文章
- 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 组件,就可以在场景中显示项目资源中的 ...
随机推荐
- 转:一篇讲线上优化查 CPU的脚本
原文链接:https://my.oschina.net/leejun2005/blog/1524687 摘要: 本文主要针对 Java 服务而言 0.背景 经常做后端服务开发的同学,或多或少都遇到 ...
- 小白的 MySQL 笔记(一)
来自 stackoverflow 的内容居多. 1- MySQL VARCHAR size? 2- 数据库设计范式 3- What is InnoDB and MyISAM in MySQL ? 4- ...
- touchstart和touchend事件
touchstart和touchend事件 移动互联网是未来的发展趋势,现在国内很多互联网大佬都在争取移动这一块大饼,如微信及支付宝是目前比较成功的例子,当然还有各种APP和web运用. 由于公司的需 ...
- Spring之DAO一
前面博客把bean.aop简单了解了一下,今天主要是了解Spring中DAO层,如果使用传统的JDBC时需要创建连接.打开.执行sql.关闭连接这一系列的步骤,Spring框架对JDBC进行了封装,我 ...
- js 变量、作用域和内存问题
基本类型和引用类型 5种基本类型:undefined.null.boolean.number.string 引用类型:由多个值构成的对象 属性 引用类型可以动态添加属性,而基本类型不可以 var p ...
- mysql 编写存储过程
先看例子: 1.delimiter $$2.drop procedure if exists`test_procedure` $$3.create procedure test_procedure(I ...
- C# DataGridView 列的显示顺序
this.dataGridView1.Columns["列名"].DisplayIndex=Convert.ToInt32("你要放置的位置")
- powerdesigner的使用
前言 做过建模和设计的人都知道,powerdesigner是个强大实用的工具:采用模型驱动方法,将业务与IT结合起来,可帮助部署有效的企业体系架构,并为研发生命周期管理提供强大的分析与设计技术.本文档 ...
- admin
执行顺序 : Admin 执行admin.py,导入models 第一次进来的时候,先创建admin.site对象(如果下次再有引入,不会重新创建) 拿到对象后执行该对象下的register()方法 ...
- Struts简介、原理及简单实现
struts简介 Struts是Apache软件基金会(ASF)赞助的一个开源项目.它最初是jakarta项目中的一个子项目,并在2004年3月成为ASF的顶级项目.它通过采用JavaServlet/ ...