1.垂直居中

  -父元素高度确定的单行文本:

    设置父元素的 height 和 line-height  高度一致来实现的。(height: 该元素的高度;line-height: 行高(行间距),指在文本中行与行之间的 基线间的距离 )。

    弊端:当文字内容的长度大于块的宽时,就有内容脱离了块。

  -父元素高度确定的多行文本:

    (1)插入 table(需要td)并且同时设置 td vertical-align:middle,注:td 标签默认情况下 vertical-align 为 middle

    (2)在 chrome、firefox 及 IE8 以上:设置display:table-cell(设置为表格单元显示),激活 vertical-align 属性,vertical-align:middle

2. position : absolute 或 float : left(right)

只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以 display:inline-block的方式显示。

css学习2的更多相关文章

  1. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  2. css学习归纳总结(三) 转

    原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...

  3. css学习归纳总结(二) 转

    原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...

  4. css学习归纳总结(一) 转

    原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...

  5. 【2016年特别福利】史上最全CSS学习资料大全

    css学习篇 [2016年特别福利]史上最全CSS学习资料大全

  6. 【转】css学习专题-BFC

    css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...

  7. css学习归纳总结

    来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...

  8. html+css学习总结

    HTML与css学习总结 一:html概念 1. html是一种描述网页的语言,并不是计算机语言这要分清楚:标记语言是运用一套标记标签描述网页的: 注意点: ①标签字母都要小写,标签一般都是成对出现, ...

  9. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  10. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

随机推荐

  1. 2018 ICPC 区域赛 焦作场 D. Keiichi Tsuchiya the Drift King(计算几何)

    http://codeforces.com/gym/102028/problem/D 题意:根据题中给的那个图,然后题目给你 a,b,r,d,让你求出最小的满足矩形通过弯道的w 思路:

  2. Alpha冲刺10

    前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/10045588.html 作业博客:https://edu.cnblogs.com/campus ...

  3. 第一章:深入web请求过程

    初学者,总结一下读书笔记,望海涵. 1.1 B/S网络架构概述 相比于C/S架构,B/S网络架构(Browser/Server)从前端到后端都得到了简化,都基于统一的应用层协议HTTP来交互数据,采用 ...

  4. Python基础03_pycharm

    pycharm的安装还是很简单的,一路next. 看起来Jet Brains 家的产品长相都差不多啊. 主要是create new project时,路径和解释器的选择,我电脑上有2.7和3.6 所以 ...

  5. 读书笔记--《gongchandang宣言》

    纪念马克思诞辰200周年 末尾 gongchandang人不屑于隐瞒自己的观点和意图.他们公开宣布:他们的目的只有用暴力推翻全部现存的社会制度才能达到. 让统治接机在共产主义革命面前发抖吧. 无产者在 ...

  6. 认识:人工智能AI 机器学习 ML 深度学习DL

    人工智能 人工智能(Artificial Intelligence),英文缩写为AI.它是研究.开发用于模拟.延伸和扩展人的智能的理论.方法.技术及应用系统的一门新的技术科学. 人工智能是对人的意识. ...

  7. Arcgis属性表出现乱码

    解决方案一:导入符号化字体: 在C:\Windows\Fonts文件夹下放入.TTF格式的字体库(此时加入农村二调_0.TTF和TDT10142007.ttf),便可使符号化的乱码显示正常. 解决方案 ...

  8. sql server中用聚合函数查询退休人的开销信息

    1创建表 create database Mathgouse MathgoCREATE TABLE A(ID INT PRIMARY KEY IDENTITY,--自增主键ID_CARD VARCHA ...

  9. h5 js判断是安卓还是ios设备,跳转到对应的下载地址

    /*ios和安卓跳转 js*/$(function(){ var u = navigator.userAgent; var ua = navigator.userAgent.toLowerCase() ...

  10. vue2中使用mint-ui,性别选择

    安装需要的组件 import { DatetimePicker,Toast,Popup,Picker } from 'mint-ui'; templete部分 <div class=" ...