为什么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 组件,就可以在场景中显示项目资源中的 ...
随机推荐
- 前端MVC Vue2学习总结(四)——条件渲染、列表渲染、事件处理器
一.条件渲染 1.1.v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1&g ...
- JVM类加载机制以及类缓存问题的处理
一:JVM类加载机制 和 类缓存问题的处理 当一个java项目启动的时候,JVM会找到main方法,根据对象之间的调用来对class文件和所引用的jar包中的class文件进行加载(其步骤分为加载.验 ...
- ecsmart的开发经历
ecsmart是ecshop的产品之一,是2015年发布的一套系统.关于它的介绍请到官网去了解,也可以百度 “商之翼” “ecsmart” 1.ecsmart分别在pc.mobile.app三个方面都 ...
- Prism for WPF再探(基于Prism事件的模块间通信)
上篇博文链接 Prism for WPF初探(构建简单的模块化开发框架) 一.简单介绍: 在上一篇博文中初步搭建了Prism框架的各个模块,但那只是搭建了一个空壳,里面的内容基本是空的,在这一篇我将实 ...
- Qt编写QUI皮肤生成器
用Qt写项目写多了,为了满足不同客户的需求,需要定制不同样式的界面,QUI皮肤生成器应运而生.思考这个工具的架构花了一年时间,如何从复杂的配色方案中提取出共性,然后将共性转为具体的QSS文件.思考架构 ...
- 原生 js 实现点击按钮复制文本
最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...
- Robot Framework学习笔记(五)------Collections 库
Collections 库同样为 Robot Framework 标准类库,它所提供的关键字主要用于列表.索引.字典的处理. 1.添加类 在使用之前需要在测试套件(项目)中添加 2.创建字典 字典也是 ...
- phpstorm+wamp+xdebug配置php调试环境
本篇文章主要是:教大家如果搭建一套phpstorm+wamp+xdebug调试php的环境现在大多数的程序员使用的调试方式一般都是echo, var_dump, file_put_contents等其 ...
- XSS Challenges闯关笔记
前言 做xss做疯了再来一个. 地址:https://xss-quiz.int21h.jp/ ,这个貌似是日本的一个安全研究员yamagata21做的. 做到第九关就跪了,而总共有二十关.一半都还没有 ...
- IE常见bug及其修复方法
一.双边距浮动的bug 1.1一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box) 2.1在浮动元素上使用了左边界(margin-left)来令它和容器的左边产 ...