今天在学习查阅代码的时候，发现了一个不认识的CSS代码，于是进行学习。

<html>

<head>

<style type="text/css">

img.top {

vertical-align:text-top;

}

img.bottom {

vertical-align:text-bottom;

}

img.middle {

vertical-align:middle;

}

</style>

</head>

<body>

<p>

这是一幅<img class="top" border="0" src="/i/eg_cute.gif" />位于段落中的图像。

</p> 

<p>

这是一幅<img class="bottom" border="0" src="/i/eg_cute.gif" />位于段落中的图像。

</p>

<p>

这是一幅<img class="middle" border="0" src="/i/eg_cute.gif" />位于段落中的图像。

</p>

</body>

</html>

效果图

使图片在对应的元素内以不同的方式进行垂直对齐

css标签学习-vertical-align标签的更多相关文章

  1. 基本STRUTS标签-学习笔记-Bean标签

    <bean:include> 和标准的JSP标签<jsp:include>很相似,都可以用来包含其他Web资源的内容,区别在于<bean:include>标签把其它 ...

  2. 基本STRUTS标签-学习笔记-Logic标签

    BEAN标签(name 是从别处得来的:id是自己的,相当于变量:property相当于变量的值) 前提: String str=request.getParameter("param&qu ...

  3. 论文笔记：多标签学习综述（A review on multi-label learning algorithms）

    2014 TKDE(IEEE Transactions on Knowledge and Data Engineering) 张敏灵,周志华 简单介绍 传统监督学习主要是单标签学习,而现实生活中目标样 ...

  4. HTML&CSS基础学习笔记1.19-DIV标签1

    div标签 这里我们要认识一下HTML里使用非常多的的一个标签:<div>. <div>标签定义文档中的分区或节(division/section),他可以把文档分割为独立的. ...

  5. HTML+CSS基础学习标签代码

    HTML基础 一.HTML页面结构 1.HTML定义 (HTML)为超文本标记语言,是写给浏览器的语言, 目前网络上应用最广泛的语言,目前已经更新到HTML5,HTML添加了一些写的语义化标签,放弃了 ...

  6. HTML学习-2标记标签-1

    大致可以分为以下6类学习: 1.通用标签. 2.常用标签. 3.表格标签. 4.表单元素. 5.框架. 6.其他. 一.通用标签.及属性 1.<body></body>标签,主 ...

  7. HTML标签---学习笔记

    第一章 HTML标准结构学习: 顶层标签:html 投标签:head 主题标签:boby <html> <head> <meta charset="utf-8& ...

  8. 46.前端html5标签学习

    HTML:TR  TD  TH  OL  UL  LI 这几个标签要区别 一.什么是HTML: 超文本标记语言(HyperText Markup Language),标准通用标记语言下的一个应用: 是 ...

  9. 前端学习(一) body标签(上)

    body标签中相关标签 主要内容: 字体标签:  h1~h6.<font>.<u>.<b>.<strong><em>.<sup> ...

  10. Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

随机推荐

  1. win7提示不是正版桌面变黑

    1.以管理员身份运行cmd.exe 2.在该界面>后面输入SLMGR -REARM,大家注意下有个空格键 然后点击确定,重启电脑就OK了.

  2. [python 学习] 使用 xml.etree.ElementTree 模块处理 XML

    ---恢复内容开始--- 导入数据(读文件和读字符串) 本地文件 country_data.xml <?xml version="1.0"?> <data> ...

  3. Intellij IDEA 插件开发秘籍

    来这里找志同道合的小伙伴! 这里总结一下 Intellij IDEA 插件开发的知识,供大家参考,本篇文章包含以下内容: 开发环境搭建 Component 介绍 Extension Point And ...

  4. $[WC2018]$通道（虚树，边分练习）

    \([WC2018]\)通道(虚树,边分练习) 感受码题的快感 这段时间真的是忙忙忙忙忙,省选之前还是露个脸,免得以后没机会了. 但是我感觉我的博客真的没啥人看,虽然我挺想要有人看的,但是自己真的没啥 ...

  5. django之类视图

    一:类视图 1. 为什么使用类视图? # 以注册请求逻辑为例 def register(request): if request.method == "GET": render(r ...

  6. man uname

    UNAME(1)         User Commands/用户命令        UNAME(1) NAME/名称       uname - print system information/打 ...

  7. NOIP2015 提高组 Day T3 斗地主

    题目描述 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的A到K加上大小王的共5张牌来进行的扑克牌游戏.在斗地主中,牌的大小关 系根据牌的数码表示如下:3<4< ...

  8. PCA(基础知识)

    参考:http://blog.csdn.net/wangjian1204/article/details/50642732 参考:https://www.zhihu.com/question/3831 ...

  9. ht-8 对arrayList中的自定义对象排序( Collections.sort(List<T> list, Comparator<? super T> c))

    package com.iotek.set; import java.util.ArrayList; import java.util.Collections; import java.util.Co ...

  10. POJ 3660 Cow Contest ( 最短路松弛思想应用 && Floyd求传递闭包 )

    题意 : 给出 N 头奶牛在比赛的结果,问你最多的能根据给出结果确定其名次的奶牛头数.结果给出的形式为 A  B 代表在比赛当中 A 战胜了 B 分析 : 对于一头奶牛来说,如果我们能确定其他 N - ...