一、垂直对齐方式{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. vscode git设置

    vscode只能打开一下界面: 在setting.path增加git.path选项,再使用linux的方法配置路径,就是使用D:/../bin/git.exe而不是\\ 重启vscode,git设置即 ...

  2. java基础1之基本数据类型

    java的数据类型 整数型(byte.short.int.long) 编程过程中,默认是int类型.long类型的字面值后面需要加上L或l PS:java底层,byte.short是按照32位计算的. ...

  3. 转 Debugging AutoCAD 2017 using Visual Studio 2015

    原文地址: http://adndevblog.typepad.com/autocad/2016/05/debugging-autocad-2017-using-visual-studio-2015. ...

  4. 了解AutoCAD对象层次结构 —— 1 ——应用程序

    想象这样一个场景:当您开始一天的工作,坐到电脑前面,用鼠标双击桌面上的AutoCAD Civil 3D图标,这时一个AutoCAD Civil 3D应用程序将运行起来.打开Windows任务管理器,我 ...

  5. python 脚本之 获取远程主机的hostname

    import sys, socket try: result = socket.gethostbyaddr("查询的IP") #查询完后获得一个元组 print (result) ...

  6. kvm 一些web管理3方工具

    OpenNebula  Proxmox VE 

  7. linux-shell系列2-机器巡检

    #!/bin/bash#主机信息每日巡检NETWORK=`ip a|grep 2:|awk -F':' '{print $2}'` IPADDR=$(ifconfig $NETWORK|grep 'i ...

  8. SQL Server查询优化器的工作原理

    SQL Server的查询优化器是一个基于成本的优化器.它为一个给定的查询分析出很多的候选的查询计划,并且估算每个候选计划的成本,从而选择一个成本最低的计划进行执行.实际上,因为查询优化器不可能对每一 ...

  9. codechef EBAIT Election Bait【欧几里得算法】

    题目分析: 欧几里得算法来处理一类分数问题,分数问题的形式如下 $\frac{a}{b} < \frac{p}{q} < \frac{c}{d}$ 当a=0时,答案等于$\frac{1}{ ...

  10. 【XSY2733】Disembrangle DP

    题目描述 有一个\(3\times n\)的网格,一些格子里已经有棋子了,一些格子里还没有. 每次你可以选择往一个没有棋子的格子里放一个棋子,但要满足这个格子上下两个格子都有棋子或左右两个格子都有棋子 ...