一、垂直对齐方式{vertical-align:middle/top/bottom;}

  <img>垂直对齐方式:1)给自身加vertical-align;再设置line-height即可;

            注意:img会受文字影响自带行高需加font-size:0;去除影响;

            2)给img标签设置参照物,也就是在同级内添加一个空标签,将其空标签高度设置为父元素高度(height:100%;),再给自身加vertical-align;

            3)将img的父元素转换成table-cell(display:table-cell;),直接给img加vertical-align;

            注意:父元素转成table-cell,margin和padding将不再对其元素产生作用。

  其他内联元素垂直对齐:将内联元素转为行内块元素(display:inline-block;)再如上img操作即可。

vertical-align垂直对齐用法的更多相关文章

  1. vertical-align表单元素垂直对齐

    原文地址:http://www.blueidea.com/tech/web/2009/6910.asp 最近的项目涉及到很多表单的制作,特别是复选框(checkbox)和单选框(radio).但是在前 ...

  2. Xamarin.Android 水平对齐与垂直对齐

    水平对齐: 1.LinearLayout添加属性:android:orientation="vertical": 2.元件添加属性:android:layout_gravity=& ...

  3. HTML 表格垂直对齐方式

    HTML表格标记教程(25):行的垂直对齐属性VALIGN在垂直方向上,可以设定行的对齐方式,分别有居上.居中.居下3种.基本语法<TR VALIGN="TOP">&l ...

  4. vertical-align 属性设置元素的垂直对齐方式。

     值 描述 baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶 ...

  5. 【css基础】文本对齐,水平对齐,垂直对齐

    先说水平对齐,那首先想到的就是text-align了,text-align:left,text-align:center,text- align:right,代表的就是左对齐,居中对齐和右对齐,需要注 ...

  6. CSS之垂直对齐

    vertical-align: baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text ...

  7. 垂直对齐:vertical-align:super属性

    <p style=”vertical-align:super;”>垂直对齐<span>上标</span></p> <p>元素默认为块级元素, ...

  8. 【CSS学习】--- 文本水平对齐属性text-align和元素垂直对齐属性vertical-align

    一.文本水平对齐属性---text-align text-align属性是将块级标签以及单元格里面的内容进行相应的对齐,块级标签里的内联元素会被整体进行移动,而子块级元素或子单元格则会继承父元素的te ...

  9. 使用vertical-align实现垂直对齐

    关于垂直对齐,之前研究过好几次了,但感觉每次都没研究透彻,做了几个效果,就觉得自己掌握了,实在是自欺欺人.真乃搞技术的大忌. 这两天又下定决心重新开始研究vertical-allign这个高深莫测的属 ...

随机推荐

  1. Java多线程之静态代理

    package org.study2.javabase.ThreadsDemo.staticproxy; /** * @Date:2018-09-18 静态代理 设计模式 * 1.真实角色 * 2.代 ...

  2. table2excel使用

    原table2excel代码 /* * 采用jquery模板插件——jQuery Boilerplate * * Made by QuJun * 2017/01/10 */ //table2excel ...

  3. C#程序中设置全局代理(Global Proxy)

    1. HttpWebRequest类的Proxy属性,只要设置了该属性就能够使用代理了,如下: 1             //设置代理 2         WebProxy WP = new Web ...

  4. Neutron 网络基本概念

    Neutron 网络基本概念 上次我们讨论了 Neutron 提供的功能,今天我们学习 Neutron 模块几个重要的概念. Neutron 管理的网络资源包括 Network,subnet 和 po ...

  5. jemter的使用

    1.启动jmeter

  6. 【BZOJ1565】【NOI2009】植物大战僵尸 网络流 最大权闭合子图

    题目大意 ​ 给你一个\(n\times m\)的地图,每个格子上都有一颗植物,有的植物能保护其他植物.僵尸从右往左进攻,每吃掉一颗植物就可以得到\(a_{i,j}\)的收益(\(a_{i,j}\)可 ...

  7. VIM 光标移动常用命令

        h或^h 向左移一个字符  k或^p 向上移一行 j或^j或^n 向下移一行 l或空格 向右移一个字符 G 移到文件的最后一行 nG 移到文件的第n行 w 移到下一个字的开头 W 移到下一个字 ...

  8. 【Gym 100947I】What a Mess

    BUPT 2017 summer training (for 16) #1D 题意 找到n个数里面有多少对具有倍数关系.\(1 ≤ n ≤ 10^4,2 ≤ a_i ≤ 10^6\) 题解 枚举一个数 ...

  9. Min_25

    可以用来筛出一个积性函数的前缀和.这个积性函数要满足当\(x\)是质数时,\(f(x)\)可以快速求出,\(f(x^k)\)也可以快速算出. 首先我们要处理出一个\(g(x)=\sum_{x\in p ...

  10. 树状数组区间加法&区间求和操作

    树状数组区间加法&区间求和操作 一般的树状数组解决区间加&单点询问并不复杂 但是要解决区间求和... 我们假设原数组是\(\{a_i\}\),差分数组\(\{d_i=a_i-a_{i- ...