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 弹性盒子垂直居中

之前在做一个项目的时候,用到弹性盒子垂直居中,鉴于宽度固定,高度不定的缘故,加上里面用的img的src是动态替换的,客户给的图片高度不一致,导致垂直居中的时候,高度较小的图片把整个img的高度固定死了...
  • c_Yuan
  • c_Yuan
  • 2015年11月11日 10:22
  • 5904

用CSS/CSS3 实现 水平居中和垂直居中的完整攻略

水平居中:行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可:   .parent { text-align:cente...
  • Summer_lover_
  • Summer_lover_
  • 2017年03月26日 21:05
  • 1913

CSS3盒模型display:box详解

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS3实现水平垂直居中

水平垂直居中的制作大家都有碰到过,水平居中方法好处理,但是垂直居中的话还是让很多人头痛过,我也碰到很多盆友来询问如何让元素水平垂直居中。前面也专门讨论过如何让图片,单行文本和多行文本实现各种浏览器的水...
  • myweishanli
  • myweishanli
  • 2014年01月02日 00:00
  • 721
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3--内容垂直居中,box-back属性
举报原因:
原因补充:

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