css3--内容垂直居中,box-back属性

原创 2015年07月10日 16:53:13
  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>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>垂直居中对齐</title>
<style>
.test_box {
display: -moz-box;
display: -webkit-box;
display: box;
width: 300px;
height: 100px;
-moz-box-align:center;-webkit-box-align:center;box-align:center;垂直居中
background: #f0f3f9;
-moz-box-pack:justify; -webkit-box-pack:justify; box-pack:justify; 水平居中
}
</style>
</head>
<body>
<div class="test_box">
<p>123</p>
<p>123</p>
</div>
</body>
</html>
Justify:火狐不兼容,谷歌可以(使用这个属性值,内容标签至少两个)
start end center 属性值 都可以兼容

相关文章推荐

css3 display:box box-flex 实现未知高度节点相对父级垂直居中

display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前...

网页元素居中攻略记_(4)用CSS3属性让元素水平垂直居中

flex实现子块的完美居中方案父块使用display:flex属性,子块margin自适应即可实现代码index.html 块状元素垂直居中(已知高度) *{margi...
  • bomess
  • bomess
  • 2015年05月31日 11:47
  • 1601

使用CSS3中的box-flex功能实现垂直等高、水平均分、比例划分布局

box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到f...

使用CSS3中的box-flex功能实现垂直等高、水平均分、比例划分布局

box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到f...

使用css3将一个div水平和垂直居中显示

使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】, 代码两个关键点:1.上下左右均0位置定位; ...

CSS3新特性,让文本在父布局垂直居中显示

做一个小项目,有这样一个需求,站点的标题栏显示标题的时候,想让标题在父布局中居中显示,就像如下 在css3之前有这样一个属性可以控制文本的显示效果text-align : center但实际前框并不...

CSS3实现水平垂直居中

水平垂直居中的制作大家都有碰到过,水平居中方法好处理,但是垂直居中的话还是让很多人头痛过,我也碰到很多盆友来询问如何让元素水平垂直居中。前面也专门讨论过如何让图片,单行文本和多行文本实现各种浏览器的水...

CSS3清除浮动 保持浮层水平垂直居中

1)清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法     1、在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在...

css3 实现元素水平和垂直居中

最近在用html5 写一些 移动前端页面 一开始对html5宣称的很多特性非常兴奋 。 结果真正用起来得时候,却非常失望,因为很多新属性必须要加浏览器前缀 一致期盼html5能带来尽可能的浏览器兼...
  • salydin
  • salydin
  • 2015年03月31日 23:41
  • 266

CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法

一、BFC与IFC 1.1、BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3--内容垂直居中,box-back属性
举报原因:
原因补充:

(最多只允许输入30个字)