vertical-align 的理解

1.vertical-align 属性和值列表

2.兼容性

3.vertical-align 的使用条件

作用于inline-block水平的元素
例如图片，按钮，单复选框，单行/多行文本框等HTML控件
实际作用中讲父元素设置为 display: table-call

4.例子

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>vertical-align实现垂直居中例子</title>
 6     </head>
 7     <body>
 8         <div style="width: 400px;height: 400px;border: 1px solid #000000;display: table-cell;vertical-align: middle;">
 9             <div style="width: 100px;height: 100px;border: 1px solid #000000;"></div>
10         </div>
11     </body>
12 </html>

时间： 2024-09-30 11:08:26

vertical-align 的理解的相关文章

line height 与 vertical align

一.line height 其中代表inline box(包含上下间距,若height==line-height,则行间距=line-height - font-size/2),big代表content area. 注: 若line-height < content area ,则line box要取line-height的值,这也是为什么会重叠的原因. line-height属性取值: 1. % 若自身没有设置line-height,则line-height = 父元素的font-size *

关于垂直居中

做项目每次垂直居中的时候都折腾半天,在这边稍微整理一下垂直居中我所理解的一点知识吧. 1,行内元素行内元素,比如,img,span等直接用vertical-align:middle,就可以搞定了. 2,块元素垂直居中,最简单的方式是height:20px;line-height:20px;让他们相等,块元素就可以达到居中效果并且不破坏周围的布局. 还可以用绝对定位来布局,height:100px;position:absolute:top:50%:margin-top:-50px;也可以达到

静态页面制作:6HTML布局(基线的应用)

我们首先来看看现在的理想和现实. 虽然我们现在现实还没有达到理想的效果,但现在至少我们已经明白为什么课后帮和HWHelper为什么不在一行了,为什么呢?那就是因为他们都是块元素.那么有没有什么办法让这两个元素编程行内元素,一旦成为行内元素,他们不就跑到一行去了吗.所以我们来看看方法一. 方法一就是使用行内元素,行内元素可以摆在一行,我们现在明确的知道,h1标签和p标签他们都是块元素,所以我们该用哪个元素呢? 我们接触过的行内元素就是a标签,我们是否可以使用a标签来解决这个问题呢?其实a标签是不合

HTML CSS常见布局

首先将页面划分为大的结构性区域,比如容器.页眉.内容区和页脚: 然后是内容区域本市,建立网格结构,分析页面结构最后再各内容区中设计结构,确定页面布局. 1. 水平居中使用display:inline 和 text-align /*.parent { text-align: center; } .child { display: inline-block; }*/ 使用margin:0 auto 设定 .child { width: 300px; margin: 0 auto; } 使用tab

静态页面制作:5HTML布局

上节课我们大概是得到了下图的一个效果,课后帮和HomeWorkHelper分别获得了带下以及样式.但是他们俩实际上是分在两行的. 我们来看一下理想与现实的一个对比. 我们看到现实与理想之间还是有一定差距的.我们的理想效果是课后帮与HWHelper是在一行,但现实情况却是在两行.我们期望的效果是在一行并且HWHelper在课后帮的右上角.其实实现这个效果并不难,我们先来对现在的情况进行一些分析. 我们想要将两行文字合为一行,会通过两种方式来实现,我们从这两种方式中管中窥豹来了解网页是如何布局的.我

深入浅出Zabbix 3.0 -- 第九章数据可视化

第九章数据可视化 Zabbix是一个非常灵活.强大的监控系统,它不仅能够监控大量不同类型的数据指标,并为这些数据及数据之间的关联提供了多种可视化工具,通过图形.展示屏.网络拓扑图等将数据直观的展现出来,实时的浏览和查看监控设备的状态. 9.1 图形 Zabbix 3.0中支持三种graphs(图形),即simple graphs(简单图形).ad-hocgraphs(自组图形)和customgraphs(自定义图形). 9.1.1 简单图形简单图形是Zabbix系统内置的一种方法,为监控项数

CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border).内边距(Padding)和内容(Content),其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型,加上了doctype声明,让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子.当设置一个元素的样式如下: <!DOCTYPE html> <html> <

IE 怪异模式（Quirks Mode）对 HTML 页面的影响

本文主要描述 Quirks Mode 和 Standards Mode 这两种文档模式渲染页面时的差异由来,并且给出一些详细的例子说明差异所在.通过阅读本文,Web 开发工程师可以对浏览器工作原理有更为深刻的理解,避免自己所开发的 Web 应用在不同的浏览器上产生不同的效果. Quirks Mode 概述定义什么是 Quirks Mode? 简单来说,Quirks Mode 就是浏览器为了兼容很早之前针对旧版本浏览器设计.并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式. 历史由渲

HighCharts -教程+例子

Highchart简介: Highcharts是一款免费开源的纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表, Highcharts目前支持直线图.曲线图.面积图.柱状图.饼图.散点图等多达18种不同类型的图表,可以满足你对Web图表的任何需求 ! Highcharts功能强大,图表种类多也很漂亮,高度自定义,兼容性比较好.具体参考:http://www.hcharts.cn/docs/index.php?doc=start-introductio

怪异模式（Quirks Mode）对 HTML 页面的影响

Quirks Mode 概述定义什么是 Quirks Mode? 简单来说,Quirks Mode 就是浏览器为了兼容很早之前针对旧版本浏览器设计.并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式. 历史由渲染引擎产生的两种文档模式谈到 Quirks modes 首先就要从浏览器渲染引擎说起.我们知道所有的浏览器都有自己的页面渲染引擎,渲染引擎主要包含两部分,一部分负责 HTML.CSS 代码的解析,另一部分负责脚本代码解析,这两部分合起来就可以绘制出完整的页面. 表 1 各浏览