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

本文涉及的产品
容器服务 Serverless 版 ACK Serverless,952元额度 多规格
容器服务 Serverless 版 ACK Serverless,317元额度 多规格
容器镜像服务 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
相关文章
|
15天前
|
XML Java 数据格式
Spring5入门到实战------7、IOC容器-Bean管理XML方式(外部属性文件)
这篇文章是Spring5框架的实战教程,主要介绍了如何在Spring的IOC容器中通过XML配置方式使用外部属性文件来管理Bean,特别是数据库连接池的配置。文章详细讲解了创建属性文件、引入属性文件到Spring配置、以及如何使用属性占位符来引用属性文件中的值。
Spring5入门到实战------7、IOC容器-Bean管理XML方式(外部属性文件)
|
2月前
|
JavaScript 容器
vue 限制在指定容器内可拖拽的div
vue 限制在指定容器内可拖拽的div
17 0
|
Android开发 索引 容器
【Android 应用开发】Android 组件 位置坐标 属性 ( 组件位置属性 | 父容器坐标系坐标 | 窗口坐标系坐标 | 屏幕坐标系坐标 | 触摸坐标 )
【Android 应用开发】Android 组件 位置坐标 属性 ( 组件位置属性 | 父容器坐标系坐标 | 窗口坐标系坐标 | 屏幕坐标系坐标 | 触摸坐标 )
284 0
|
前端开发 JavaScript 容器
如何保持容器(div)固定宽高比
在前端界面中播放视频和图片的时候,为了保持其内容不变形,就需要保持容器的固定宽高比
99 1
教你快速上手Flex弹性盒布局(容器属性)(二)
教你快速上手Flex弹性盒布局(容器属性)
|
4月前
|
安全 Java 容器
Netty通道的容器属性Attribute
Netty中的Channel通道类,有类似于Map的容器功能,可以通过“key-value”键值对的形式来保存任何Java Object的值。一般来说可以存放一些与通道实例相关联的属性,比如说服务期端的ServerSession会话实例。
教你快速上手Flex弹性盒布局(容器属性)(三)
教你快速上手Flex弹性盒布局(容器属性)
|
JavaScript 容器
教你快速上手Flex弹性盒布局(容器属性)(一)
教你快速上手Flex弹性盒布局(容器属性)
|
运维 前端开发 容器
一文剖析HTML块和内联元素以及DIV容器,运维开发必备前端技能,基本功强化训练。
一文剖析HTML块和内联元素以及DIV容器,运维开发必备前端技能,基本功强化训练。
109 0
|
前端开发 安全 Java
极限控制准备之IOC容器结构说明|学习笔记
快速学习极限控制准备之IOC容器结构说明
104 0
极限控制准备之IOC容器结构说明|学习笔记
下一篇
云函数