div垂直居中于父容器 box-pack 属性和box-align属性控制

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
简介:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title></title>
<style type="text/css">
div#container {
    display: -moz-box;
    display: -webkit-box;
    -moz-box-align: center;
    -webkit-box-align: center;
    -moz-box-pack: center;
    -webkit-box-pack: center;
    width: 300px;
    height: 200px;
    background-color: pink;
}
#text-a { background-color: orange; }
#text-b { background-color: yellow; }
#text-c { background-color: limegreen; }
</style>
</head>
<body>
<div id="container">
    <div id="text-a">列1</div>
    <div id="text-b">列2</div>
    <div id="text-c">列3</div>
</div>
</body>
</html>

本文转自  小旭依然  51CTO博客,原文链接:http://blog.51cto.com/xuyran/1786343
相关文章
|
Android开发 索引 容器
【Android 应用开发】Android 组件 位置坐标 属性 ( 组件位置属性 | 父容器坐标系坐标 | 窗口坐标系坐标 | 屏幕坐标系坐标 | 触摸坐标 )
【Android 应用开发】Android 组件 位置坐标 属性 ( 组件位置属性 | 父容器坐标系坐标 | 窗口坐标系坐标 | 屏幕坐标系坐标 | 触摸坐标 )
252 0
|
8月前
|
容器
教你快速上手Flex弹性盒布局(容器属性)(二)
教你快速上手Flex弹性盒布局(容器属性)
|
4月前
|
安全 Java 容器
Netty通道的容器属性Attribute
Netty中的Channel通道类,有类似于Map的容器功能,可以通过“key-value”键值对的形式来保存任何Java Object的值。一般来说可以存放一些与通道实例相关联的属性,比如说服务期端的ServerSession会话实例。
|
8月前
|
容器
教你快速上手Flex弹性盒布局(容器属性)(三)
教你快速上手Flex弹性盒布局(容器属性)
|
8月前
|
JavaScript 容器
教你快速上手Flex弹性盒布局(容器属性)(一)
教你快速上手Flex弹性盒布局(容器属性)
|
11月前
|
运维 前端开发 容器
一文剖析HTML块和内联元素以及DIV容器,运维开发必备前端技能,基本功强化训练。
一文剖析HTML块和内联元素以及DIV容器,运维开发必备前端技能,基本功强化训练。
|
前端开发 安全 Java
极限控制准备之IOC容器结构说明|学习笔记
快速学习极限控制准备之IOC容器结构说明
90 0
极限控制准备之IOC容器结构说明|学习笔记
|
容器
echarts如何让图表占满整个div容器
echarts如何让图表占满整个div容器
1169 0
echarts如何让图表占满整个div容器
|
XML Java 数据格式
【Spring 从0开始】IOC容器的Bean管理 - 基于XML,注入集合类型属性
【Spring 从0开始】IOC容器的Bean管理 - 基于XML,注入集合类型属性
【Spring 从0开始】IOC容器的Bean管理 - 基于XML,注入集合类型属性
|
XML Java 数据格式
【Spring 从0开始】IOC容器的Bean管理 - 基于XML,创建对象、注入属性
【Spring 从0开始】IOC容器的Bean管理 - 基于XML,创建对象、注入属性
【Spring 从0开始】IOC容器的Bean管理 - 基于XML,创建对象、注入属性