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这个高深莫测的属 ...
随机推荐
- PHP涉及到的英文单调
slashes [slæʃeis]:斜线 uppercase ['ʌpəˌkeɪs]:大写字母,简写uc strip [strɪp]:去掉 trim [trɪm]:整理(修剪) explode [ɪk ...
- 二、Java多人博客系统-演变
任何项目都是由小到大,逐步演变的.自己写的这个博客系统也不例外. 更新日志如下: 一.2014年底-2015年初 功能及技术: 1.定位为个人网站,介绍自己情况和发布文章等. 2.首页模块有:个人简介 ...
- Tyche 2317 Color
题目大意:有三个人alice,bob,yazid,三种颜色red,blue,green,每个人对应一种颜色. [name] is [color]. Yazid会做以下操作: 1 将三个句子连在一起 2 ...
- 基于junit的单元测试类编写
首先定义抽象类BaseTest package com.geostar.gfstack.operationcenter.common.util; import com.google.gson.Gson ...
- Python多进程、多线程、协程
转载:https://www.cnblogs.com/huangguifeng/p/7632799.html 首先我们来了解下python中的进程,线程以及协程! 从计算机硬件角度: 计算机的核心是C ...
- 非阻赛IO模型
实例一: 只能在waitdata 阶段找到IO的解决方案 from concurrent.futures import ThreadPoolExecutor import socket server ...
- Unnitest测试框架总结
Unnitest总结 第一点,setUp和tearDown方法 l 每次执行test开头的用例都会执行setUp和tearDown方法 l 如: import unittest class M ...
- River Problem HDU - 3947(公式建边)
River Problem Time Limit: 6000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tot ...
- 【XSY2668】排列统计 DP
题目描述 给你一个长度为\(n\)的排列\(a\),每次要选择两个数,交换这两个数(这两个数可以相同).总共要交换\(k\)次. 最后要统计数列中有多少位置\(i\)满足\(\max_{j\leq i ...
- studio 连不上远程仓库的各种原因分析
Unable to open the project 1.远程服务器挂了2.网络断了3.登录远程服务器的账号.密码错了4.远程仓库的url地址,被本地的hosts文件重定向了5.要下载远程仓库的某个j ...