一、垂直对齐方式{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. Jenkins: 1.x升级到2.x

    停止Jenkins Service 用2.x的"jenkins.war"替换安装目录下的"jenkins.war" 启动Jenkins Service 打开je ...

  2. Vue过渡状态

    前面的话 Vue 的过渡系统提供了非常多简单的方法设置进入.离开和列表的动效.那么对于数据元素本身的动效呢?包括数字和运算.颜色的显示.SVG 节点的位置.元素的大小和其他的属性等.所有的原始数字都被 ...

  3. KKT条件

    kkt条件背下来容易.理解上还有问题 主要是lambda≥0和lambda*f(x)=0这两个条件懵逼. 下面说明一下为什么 参考:https://blog.csdn.net/newthinker_w ...

  4. 包装类接受string 会自动将数字类型string转换成对应得包装类型

  5. Linux下git的使用——将已有项目放到github上

    本地已经有一个项目了,需要将该项目放到github上,怎么操作? 步骤: 本地安装git,有github账号是前提. (1)先在github创建一个空的仓库,并复制链接地址.使用https,以.git ...

  6. Nginx 减少关闭连接的time_wait端口数量

    L:129

  7. 适用于Centos6.x系统的15项优化脚本

    1#!/bin/bash 2# Date: 2018-6-8 3#version:1.2 4#实现功能:一键系统优化15项脚本,适用于Centos6.x 5###################### ...

  8. Flask 构建微电影视频网站(三)

    搭建后台页面 视图函数位于admin文件夹下, app/admin/views.py 管理员登录页面搭建 视图函数 @admin.route('/') def index(): return '后台主 ...

  9. Django+Xadmin打造在线教育系统(三)

    完成登录 注册 找回密码 激活 验证码集成 将HTML文件拷贝到templates目录下,css,js,img,media,images文件夹拷贝到static文件夹下 修改index.html和lo ...

  10. python的if not用法

    python里的if not的用法: None,False,0,空列表[],空字典{},空元祖(),都相当于false print('not x 打印出来的结果',not x) x =[1] prin ...