vertical-align垂直对齐用法
一、垂直对齐方式{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垂直对齐用法的更多相关文章
- vertical-align表单元素垂直对齐
原文地址:http://www.blueidea.com/tech/web/2009/6910.asp 最近的项目涉及到很多表单的制作,特别是复选框(checkbox)和单选框(radio).但是在前 ...
- Xamarin.Android 水平对齐与垂直对齐
水平对齐: 1.LinearLayout添加属性:android:orientation="vertical": 2.元件添加属性:android:layout_gravity=& ...
- HTML 表格垂直对齐方式
HTML表格标记教程(25):行的垂直对齐属性VALIGN在垂直方向上,可以设定行的对齐方式,分别有居上.居中.居下3种.基本语法<TR VALIGN="TOP">&l ...
- vertical-align 属性设置元素的垂直对齐方式。
值 描述 baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶 ...
- 【css基础】文本对齐,水平对齐,垂直对齐
先说水平对齐,那首先想到的就是text-align了,text-align:left,text-align:center,text- align:right,代表的就是左对齐,居中对齐和右对齐,需要注 ...
- CSS之垂直对齐
vertical-align: baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text ...
- 垂直对齐:vertical-align:super属性
<p style=”vertical-align:super;”>垂直对齐<span>上标</span></p> <p>元素默认为块级元素, ...
- 【CSS学习】--- 文本水平对齐属性text-align和元素垂直对齐属性vertical-align
一.文本水平对齐属性---text-align text-align属性是将块级标签以及单元格里面的内容进行相应的对齐,块级标签里的内联元素会被整体进行移动,而子块级元素或子单元格则会继承父元素的te ...
- 使用vertical-align实现垂直对齐
关于垂直对齐,之前研究过好几次了,但感觉每次都没研究透彻,做了几个效果,就觉得自己掌握了,实在是自欺欺人.真乃搞技术的大忌. 这两天又下定决心重新开始研究vertical-allign这个高深莫测的属 ...
随机推荐
- Docker最全教程——从理论到实战
Docker最全教程——从理论到实战(一) Docker最全教程——从理论到实战(二) Docker最全教程——从理论到实战(三) Docker最全教程——从理论到实战(四) Docker最全教程—— ...
- codeforces630C
Lucky Numbers CodeForces - 630C 小希称只含7和8的数是幸运数,那么不超过n位的幸运数有多少个? Input 一个整数 n (1 ≤ n ≤ 55) Output 输出幸 ...
- Luogu1137 旅行计划(拓扑排序)
题目传送门 拓扑排序板子题,模拟即可. 代码 #include<cstdio> #include<iostream> #include<cmath> #includ ...
- 【数学建模】day04-插值与拟合
关于插值原理,这篇文章里总结过. 插值,是在有限个数据点的情况下,模拟出更多的点来适应实际问题的需要. 拟合,是在已知数据点基础上,以已知点处最小误差为标准,模拟出近似函数. 二者有似,实则不同,ma ...
- 源码分析: 图片加载框架Picasso源码分析
使用: Picasso.with(this) .load("http://imgstore.cdn.sogou.com/app/a/100540002/467502.jpg") . ...
- mybatis,mysql批量delete多个记录
1.dao 接口中 Integer delete(List<UserDeviceRela> relas); 2.xml <delete id="delete" p ...
- BZOJ4712洪水——动态DP+树链剖分+线段树
题目描述 小A走到一个山脚下,准备给自己造一个小屋.这时候,小A的朋友(op,又叫管理员)打开了创造模式,然后飞到 山顶放了格水.于是小A面前出现了一个瀑布.作为平民的小A只好老实巴交地爬山堵水.那么 ...
- 洛谷P1462通往奥格瑞玛的道路题解
[题目]: https://www.luogu.org/problemnew/show/P1462 题意 题目是给定了一张双向边,有边权的图,然后让我们求出一个最小值,满足一条路径上的最大的费用小于这 ...
- [算法进阶0x10]基本数据结构C作业总结
t1-Supermarket 超市利润 题目大意 给定n个商品,每个商品有利润pi和过期时间di.每天只能卖一个商品,过期商品不能卖.求如何安排每天卖的商品可以使收益最大. 分析 一开始打了一个复杂度 ...
- Nifi 老是死机
1. nifi服务器配置 CPU:4核 内存:7G 2. 改动如下: nifi.provenance.repository.rollover.time=30 secs --> 36000 s ...