垂直对齐图像文字

vertical-align:text-top;　　图像的顶部与同一行中最高的图像或文本的顶部对齐

<img src="data:images/cake01.jpg" style="vertical-align:text-top;">

vertical-align:text-bottom;　　图像的底部与文本的底部对齐

<img src="data:images/cake02jpg" style="vertical-align:text-bottom;">

vertical-align:middle;　　图像的中心与同一行中其他内容的中心对齐

<img src="data:images/cake03jpg" style="vertical-align:middle;">

vertical-align:baseline;　　像的底部与文本的基线对齐

<img src="data:images/cake04.jpg" style="vertical-align:baseline;">

HTML、CSS笔记（一）的更多相关文章

  1. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  2. CSS笔记--选择器

    CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...

  3. HTML+CSS笔记 CSS中级 一些小技巧

    水平居中 行内元素的水平居中 </a></li> <li><a href="#">2</a></li> &l ...

  4. HTML+CSS笔记 CSS中级 颜色&长度值

    颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 语法: p{co ...

  5. HTML+CSS笔记 CSS中级 缩写入门

    盒子模型代码简写 回忆盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左. 语法: margin:10px 15p ...

  6. HTML+CSS笔记 CSS进阶再续

    CSS的布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上, ...

  7. HTML+CSS笔记 CSS进阶续集

    元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...

  8. HTML+CSS笔记 CSS进阶

    文字排版 字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性. 语法: body{font-family:"宋体";} 这里注意不要设置不常用的字体,因为如果 ...

  9. HTML+CSS笔记 CSS入门续集

    继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代(标签). 语法: p{color:red;} <p> ...

  10. HTML+CSS笔记 CSS入门

    简介: </span>年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的<span>脚本解释程序</span>,作为ABC语言的一种继承. & ...

随机推荐

  1. 使用java代码调用rabbitmq接口进行新增编辑mq用户、虚拟机vhost、动态创建交换机exchange、队列queue以及设置权限，绑定vhost与exchange等操作

    使用java代码操作rabbitmq时,首先需要一个有创建用户等权限的管理员账号,需要在rabbitmq的后台管理页面手动创建这个账号,系统推荐的这几个tag可以让账号有rabbitmq后台管理页面的 ...

  2. （四）elasticsearch 源码之索引流程分析

    1.概览 前面我们讨论了es是如何启动,本文研究下es是如何索引文档的. 下面是启动流程图,我们按照流程图的顺序依次描述.     其中主要类的关系如下:     2. 索引流程 我们用postman ...

  3. CF896E Welcome home, Chtholly

    题面 维护一个\(n(n\leqslant 100000)\)个元素序列\(a_1,a_2,\dots,a_n\),有\(m(m\leqslant 100000)\)次操作,分为如下两种. 给定\(l ...

  4. 最新版 Proteus 8.15 Professional 图文安装教程 [ 附安装包 ]

    前言 Proteus 是世界上唯一将电路仿真软件.PCB设计软件和虚拟模型仿真软件三合一的设计平台. Proteus 8.15 现已发布,本篇将带领大家安装此版本. 介绍 Proteus Proteu ...

  5. 玩转web3第一篇——web3-react

    概况 web3-react是由Noah Zinsmeister开发的一个web3框架,主要功能是实时获取DApp里的关键数据(如用户当前连接的地址.网络.余额等). Noah也是著名的去中心化交易所u ...

  6. typora配置图床

    PicGo无法上传图片,报下图错误 Error: Error in repo name 这里我使用图床是gitee 上传之前需要安装插件 解决方法: 最后一步:配置typora, 点击验证图片选项,查 ...

  7. 11月9日内容总结——单例模式的多种实现方式、pickle序列号模块和选课系统

    目录 一.单例模式实现的多种方式 方式一:使用类 方法二:使用metaclass方式(自定义元类) 方法三:自定义双下new 方法四:基于模块的单例模式 二.pickle序列化模块 优势: 缺陷: 方 ...

  8. 可迭代对象和迭代器对象以及for循环的本质

    目录 一.可迭代对象 二.迭代器对象 迭代器介绍: 迭代器对象: 迭代器对象的作用 迭代器对象实操: 注意事项 三.for循环的本质 一.可迭代对象 之前我们对于for循环为什么可以遍历没有做具体解释 ...

  9. VUE防止多次点击，重复请求

    1.添加自定义文件 preventReClick.js import Vue from 'vue' const preventReClick = Vue.directive('preventReCli ...

  10. 记录一次前端hack尝试

    背景 playcode很好用,但是给的免费时间很短,于是想hack他 hack的步骤全部来源于bilibili视频:https://www.bilibili.com/video/BV1N3411v7C ...